码迷,mamicode.com
首页 > 移动开发 > 详细

fastclick使用与 fastclick ios11.3相关bug原因(ios输入框点击变得不灵敏,ios input失焦后,页面上移,点击不了)

时间:2019-12-05 20:25:58      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:one   inpu   原因   import   length   检查   line   个人   npm   

FastClick

移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件,就有了FastClick。

安装fastclick可以使用npm,Component和Bower。另外也提供了Ruby版的gem fastclick-rails以及.NET提供了NuGet package

npm install fastclick

 import   FastClick   from ‘fastclick‘;
 
 Vue.use(FastClick);
 
 //在main.js中引入,并绑定到body。
import FastClick from ‘fastclick‘

FastClick.attach(document.body);
 

 最近发现升级到ios11.3之后,输入框点击变得不灵敏,第二次点击页面中的输入框需要长按一会才能正常唤起键盘输入。

 

解决方案

FastClick.js原文件的FastClick.prototype.focus
FastClick.prototype.focus = function(targetElement) {
    var length;

    if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf(‘date‘) !== 0 && targetElement.type !== ‘time‘ && targetElement.type !== ‘month‘ && targetElement.type !== ‘email‘) {
        // 通过 targetElement.setSelectionRange(length, length) 将光标的位置定位在内容的尾部(但注意,这时候还没触发focus事件)
        length = targetElement.value.length;
        targetElement.setSelectionRange(length, length);
        targetElement.focus();//强制元素focus,即在改写的focus响应函数中直接触发元素的focus事件
  } else {
   targetElement.focus();
  }
};

ios 软键盘关闭后 页面不会回弹(解决IOS中input失焦后,页面上移,点击不了问题)
解决方法:

var u = navigator.userAgent;
  var flag;
  var 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
      }
    })
  } else {
    return
  }

//input 失焦事件 @blur="InputBlur"
  InputBlur: function(value){
     window.scroll(0, 0);
  }

fastclick使用与 fastclick ios11.3相关bug原因(ios输入框点击变得不灵敏,ios input失焦后,页面上移,点击不了)

标签:one   inpu   原因   import   length   检查   line   个人   npm   

原文地址:https://www.cnblogs.com/FACESCORE/p/11991618.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!