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 兼容性问题的主要内容,如果未能解决你的问题,请参考以下文章