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

Posted 一杯清泉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5中常见的 Android 和 iOS 兼容性问题相关的知识,希望对你有一定的参考价值。

一、input

const focusRef = useRef<htmlInputElement>();

<input ref=focusRef/>

1、android

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

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

  • 点击 input软键盘不弹出,没有焦点:

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

2、ios

  • 焦点跟随软键盘,有焦点,软键盘弹出,没有焦点,软键盘收回。
  • autoFocus、focus、blur 失效。
  • 只有用户交互触发的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, '/');
;

后续补充……

以上是关于H5中常见的 Android 和 iOS 兼容性问题的主要内容,如果未能解决你的问题,请参考以下文章

H5混合开发中android终端和ios终端常见的兼容问题1

Web测试中常见分享问题

H5移动端IOS/Android兼容性总结,持续更新中…

微信 H5 开发,几个常见兼容性的坑

H5页面前端开发常见的兼容性问题解决方法

h5调用摄像头拍照兼容性及原生实现拍照取景框