H5中常见的 Android 和 iOS 兼容性问题

一、input

const focusRef = useRef<HTMLInputElement>();

<input ref={focusRef}/>

1、Android

• 有焦点，软键盘默认弹出，可以手动收回软键盘，焦点还在。
• fautoFocus、ocus、blur 有效，。
• 点击 input软键盘不弹出，只需设置autoFocus为 false，这样会有焦点，想要没有焦点：

onClick={() => {
    //有效
    focusRef.current.focus() 
    //无效
    setTimeout(()=>{
    focusRef.current.focus()
    },2000)
}}

• 点击 input软键盘不弹出，没有焦点：

onClick={() => {
  focusRef.current.blur()
}}

2、iOS

• 焦点跟随软键盘，有焦点，软键盘弹出，没有焦点，软键盘收回。
• focus、blur 无效，autoFocus必须在软键盘单独弹出来邮箱，如果同时有弹窗或者页面大小变化则无效。
• 只有用户交互触发的focus事件才会起效，而延时，异步等非交互的回调的focus是不会触发的，原因是IOS的安全机制开始阻止你触发input元素的focus事件：如下

onClick={() => {
    //有效
    focusRef.current.focus() 
    //无效
    setTimeout(()=>{
    focusRef.current.focus()
    },2000)
}}

• 点击 input软键盘不弹出，没有焦点：

onClick={() => {
  focusRef.current.blur()
}}

        最好在代码中不要主动focus()，可能会在真机上引起页面布局被iOS 软键盘顶上去，而Android、Google、Safair 中则正常。

参考：https://www.imooc.com/m/wap/article/detail.html?aid=20453

二、日期

        Safair、IOS不支持时间为2020-05-29这种格式的日期，必须转换为2020/05/29这种格式才能使用new Date()进行转换，而 Android 和 Google 正常，需要处理下：

export const getIOSNotNaNDate = (data) => {
  if (!data || typeof data === 'number' || !data.includes('-')) {
    return data;
  }
  return data.replace(/-/g, '/');
};

后续补充……