ios移动端input输入框卡顿，失焦，弹不出软键盘

最新推荐文章于 2024-12-31 14:32:00 发布

logytar

最新推荐文章于 2024-12-31 14:32:00 发布

阅读量1.7k

点赞数

分类专栏： vue 文章标签：输入框失焦卡顿 ios input失焦

本文链接：https://blog.csdn.net/qiumen/article/details/116147319

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

这篇博客主要讨论了在Vue项目中引入fastclick库后，遇到iOS设备上input输入框卡顿和失焦的问题。作者提供了修改main.js文件的解决方案，通过修改fastclick的focus方法，兼容了iOS设备特别是针对date、datetime、month等类型的输入框，确保在修复页面迟钝问题的同时，避免了输入框交互异常，保证了软键盘的正常弹出。

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

当前是个vue项目，我之前在项目引入fastclick，导致出现了ios移动端input输入框卡顿，失焦，弹不出软键盘
因此可在main.js文件做修改

//---------------原来引入
import FastClick from 'fastclick'
FastClick.attach(document.body);

//-------------现在修改-----------------
//原fastclick视为了解决页面迟钝，现解决fastclick带来引入后导致输入框失焦，
FastClick.prototype.focus = function (targetElement) {
  var length;

  var deviceIsWindowsPhone = navigator.userAgent.indexOf("Windows Phone") >= 0;
  var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone;  
    //兼容处理:在iOS7中，有一些元素（如date、datetime、month等）在setSelectionRange会出现TypeError    
    //这是因为这些元素并没有selectionStart和selectionEnd的整型数字属性，所以一旦引用就会报错，因此排除这些属性才使用setSelectionRange方法
  if ( deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') { 
    length = targetElement.value.length; 
    targetElement.setSelectionRange(length, length);//修复bug ios 11.3不弹出键盘，这里加上聚焦代码，让其强制聚焦弹出键盘    
    targetElement.focus(); 
  } else { 
    targetElement.focus(); 
  }
}