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

Posted 2023-03-01 一杯清泉

一、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, '/');
;

后续补充……