【JS插件篇】解决IOS下H5页面 input 框点击不灵敏，需要多次点击或长按才能唤起软键盘的问题

本文链接：https://blog.csdn.net/zxy602627878/article/details/126125157

前言

在开发H5页面时二次封装了antd mobile组件库中的searchBar组件，但在测试过程中发现，IOS下输入框经常无法选中，即无法唤起软键盘，需要多次点击或长按才能唤起，而安卓机及windowPC下则正常展示。

原因

刚开始以为是样式影响，但由于是进行了二次封装，在二次封装的组件库上并没有这个情况，antd mobile组件库中也没有该问题，想到应该是项目中产生的问题，排除项目中的样式问题后，通过查找网络上类似问题，猜测是fastClick的问题

解决方案

网上有两种方式修改：

找到node_module里的fastClick文件，修改focus方法，但此方法不建议，因为如果以后npm install，就会被覆盖。
在fastClick引用的地方，直接修改 js ，比如，我的项目中是在public下的index.html文件中引用，所以通过以下方式重写focus方法：

<script type="text/javascript" src="/lib/fastclick_1.0.6/fastclick.min.js"></script>
<script>
    /**
    * 重写FastClick的focus方法，用于解决IOS下input框唤启软键盘不灵敏问题
    */
    FastClick.prototype.focus = function(targetElement) {
      var length;
      // Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.
      if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
          length = targetElement.value.length;
          targetElement.focus();// 加入这一句话
          targetElement.setSelectionRange(length, length);
      } else {
          targetElement.focus();
      }
    };
</script>