解决使用fastclick在ios输入框点击不灵敏，ios 软键盘关闭input失焦后页面上移点击不了问题

Martin-Luo

于 2023-03-08 11:14:18 发布

阅读量386

点赞数

分类专栏： Vue 文章标签： javascript html5 js web

本文链接：https://blog.youkuaiyun.com/Dragon_Luo/article/details/129399330

版权

Vue 专栏收录该内容

11 篇文章

订阅专栏

文章介绍了在使用FastClick库时遇到的iOS设备输入框点击响应慢的问题以及软键盘关闭后导致页面无法点击的解决方案。针对输入框点击，修改了FastClick的focus方法；对于页面上移问题，通过监听focusin和focusout事件，实现键盘收起时页面平滑滚动回顶部。

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

fastclick在ios输入框点击不灵敏

解决办法：

import FastClick from 'fastclick'
FastClick.attach(document.body)

FastClick.prototype.focus = function (targetElement) {
  let length
  if (
    targetElement.setSelectionRange &&
    targetElement.type.indexOf("date") !== 0 &&
    targetElement.type !== "time" &&
    targetElement.type !== "month"
  ) {
    length = targetElement.value.length
    targetElement.focus()
    targetElement.setSelectionRange(length, length)
  } else {
    targetElement.focus()
  }
}

ios 软键盘关闭input失焦后页面上移点击不了

解决办法：

(function() {
  var u = navigator.userAgent,
    flag,
    myFunction;
  var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  if (isIOS) {
    document.body.addEventListener('focusin', () => {  // 软键盘弹起事件
      flag = true;
      clearTimeout(myFunction);
    })
    document.body.addEventListener('focusout', () => { // 软键盘关闭事件
      flag = false;
      if (!flag) {
        myFunction = setTimeout(function () {
          window.scrollTo({ top: 0, left: 0, behavior: "smooth" })// 当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变，并不一定要回到页面顶部)
        }, 200);
      } else {
        return false
      }
    })
  } else {
    return false
  }
})();