2C 兼容小技巧 合集

以前一直是2b端没遇到过啥兼容性 或者 奇奇怪怪改UI的地方，现在换成C端业务，就在这里记录下遇到的奇奇怪怪的需求以及解决办法吧。 这篇文章争取 长久更新，希望自己能坚持写下去。

修改input date默认框的小图标

因为干不过UI&PM 所以这个需求接了： 修改样式：新设计稿的小图标以及位置都换了，所以做法是用白色的div覆盖原来的图片，再添加新图标，但是应为这个点击事件是在原图标上的，干掉原图标会导致点击事件不触发，刚开始我是想说给这个新图标加点击事件，触发原生的showPicker事件，但是Safari不兼容，这个方案不合适，后面小伙伴帮忙查到了新方案，换个思路，给input加上这个 css 属性 pointer-events: none; 事件就在新icon上被触发了,核心代码如下：

<Input type="date"/>
<StyleDateBlank /> // 白色遮罩
<StyleDateIconWrap /> // 新图标

export const StyleDateInputWrap = styled(Box)`
  position: relative;
`;
export const StyleDateIconWrap = styled(Box)`
  position: absolute;
  background-color: #fff;
  width: 20px;
  height: 20px;
  background-image: url(${calendarIcon});
  background-size: 20px 20px;
  right: 16px;
  top:50%;
  transform: translateY(-50%);
  pointer-events: none;
`;

export const StyleDateBlank = styled(Box)`
  position: absolute;
  background-color: #fff;
  width: 20px;
  height: 20px;
  right: 20px;
  top:50%;
  transform: translateY(-50%);
  pointer-events: none;
`;

hover样式在iphone ipad 里会被右滑触发 导致奇怪的效果

@media(hover) {} 利用媒体查询包裹一下 给有hover的才加样式

beforeunload 在iphone Safari里面不兼容 无法触发离开页面确认弹窗

利用给a链接加事件 来处理

function isSafariMobile() {
  return navigator && /Safari/.test(navigator.userAgent) && /iPhone|iPad/.test(navigator.userAgent);
}
const leavePage = (e) => {
    if (store.isChanged) {
      e.preventDefault();
      const msg = 'You have unsaved changes, are you sure you want to leave?';
      e.returnValue = msg;
      return msg;
    }
  };

  const handleUnload = (e) => {
    if (store.isChanged) {
      // eslint-disable-next-line no-restricted-globals
      const msg = confirm('You have unsaved changes, are you sure you want to leave?');
      if (!msg) {
        e.preventDefault();
        e.stopPropagation();
        return false;
      }
    }
  };
  
const addWatcherToLinks = (baseNode) => {
    if (!baseNode || !baseNode.querySelectorAll) { return; } // ignore comments, text, etc.
    baseNode.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', handleUnload);
    });
  };

  useEffect(() => {
    if (isSafariMobile()) {
      // ios safari 不兼容beforeunload
      addWatcherToLinks(document);
      window.addEventListener('DOMNodeInserted', (event) => { addWatcherToLinks(event.target); }, false);
    } else {
      window.addEventListener('beforeunload', leavePage);
    }

    return () => {
      if (isSafariMobile()) {
        // ios safari 不兼容beforeunload
        window.removeEventListener('DOMNodeInserted', (event) => { addWatcherToLinks(event.target); }, false);
      } else {
        window.removeEventListener('beforeunload', leavePage);
      }
      // 系统prompt弹窗确认后 跳出页面 store change被重置
      store.resetChange();
    };
  }, []);

safari input 会默认给加上小图标 小三角

解决办法

// 防止safari input icon出现小图标
input::-webkit-credentials-auto-fill-button , // password
input::-webkit-contacts-auto-fill-button { // other
  display: none !important;
  visibility: hidden;
  pointer-events: none;
  position: absolute; /* 避免占用 input 元素额外的 padding，正常情况下存在 display: none!; 就可以了 */
  right: 0;
}

火狐浏览器拖拽图片会自动打开新的选项卡

原因是火狐一个插件导致的 关闭这个插件就好 详见 dev.j79-stage.500px.net:3220/manager?vie…

textarea maxlength 进行输入字数限制 表情 emoji 在 ios里错误

ios 里面 表情 字符 emoji 是认作一个字符，在其它端是2个，为了统一 手动截取字符长度 参考 www.alloyteam.com/2017/03/mov… github.com/ant-design/…