ios的webview下input点击多次才会出现软键盘

最新推荐文章于 2023-12-20 14:42:18 发布

原创

最新推荐文章于 2023-12-20 14:42:18 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#fastclick #input #ios #ios下input无效

在 iOS 的 WebView 中，input 元素需要多次点击或长按才会显示软键盘，这可能与 fastClick 和 iOS 版本有关。fastClick 是为了解决 click 300ms 延迟和 click 穿透现象而设计的库。问题可能源于 iOS 11.3 后对 passive event listeners 的支持，该支持改进了页面滑动性能，但可能导致 input 聚焦问题。解决方案包括修改 fastClick 源码，针对 iOS 11+ 版本添加特定判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在webview中有input框，在Android下是有效的，在pc中也是好的，但是在ios中需要点击多次或者长按才会弹出软键盘。

探索原因，可能与fastclick有关，以及与ios的版本有关

1.fastClick是什么？

先来看fastClick解决了什么问题：

click 300ms延迟：浏览器click会比touch延迟300ms触发
click穿透现象：当两个div同处一个position，上层div绑定touch，下层div绑定click,当上层div触发touch消失后，可能会触发下层div的click事件

fastClick的原理：

fastclick利用捕获顶层dom元素(如：body，html等)的click事件，拦截所有的click请求进行判断：是否有touch触发、是否需要阻碍click事件(stopImmediatePropagation)等。

2.解决方法：

1.更改fastClick的源码
增加targetElement.focus();

FastClick.prototype.focus = function(targetElement) {
   
   
        var length;
        //兼容处理:在iOS7中，有一些元素（如date、datetime、month等）在setSelectionRange会出现TypeError
        //这是因为这些元素并没有selectionStart和selectionEnd的整型数字属性，所以一旦引用就会报错，因此排除这些属性才使用setSelectionRange方法
        if (deviceIsIOS