ios 输入框、文本框获取焦点不灵敏的问题，必须重压或长按才能唤起软键盘

最新推荐文章于 2024-05-17 08:31:50 发布

大hei客

最新推荐文章于 2024-05-17 08:31:50 发布

阅读量388

点赞数

本文链接：https://blog.csdn.net/qq_49173190/article/details/135107301

版权

文章讲述了iOS设备上输入框点击后键盘延迟问题，源于fastclick.js与iOS11修复的300ms延迟冲突。提供了解决方案，包括在fastClick.js文件中修改focus方法和在main.js中适应性引入修复代码。

摘要由CSDN通过智能技术生成

现象：ios点击输入框之后没反应，需要多次点击或者长按一会儿才能唤起软键盘，经过查阅，发现应该是fastclick.js 引起的冲突，ios11 后修复了移动点击300ms延迟，所以ios 11 及以上版本会有这个问题
解决方法
1、在node_module里找到fastClick.js文件，然后找到focus方法
在focus 方法里的 if 语句中添加一下代码

targetElement.focus();

完整代码：

if (deviceIsIOS && 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();
}

2、在main.js中添加（这项根据具体情况添加/比如项目中有阻止系统键盘调用客户端安全键盘的逻辑最好不要加）

   // 解决 input、textarea 获取焦点不灵敏的问题
   // 原因：fastclick.js 引起的冲突，ios11 后修复了移动点击300ms延迟
   const str= navigator.userAgent.toLowerCase()
   const ver=str.match(/cpu iphone os (.*?) like mac os/)
   if(ver && parseInt(ver[1]) > 10){//IOS系统
   	 // 引入fastclick 做相关处理
   	if (typeof FastClick.prototype.focus === 'function') {
   		var oldFocusFn = FastClick.prototype.focus
   		FastClick.prototype.focus = function(targetElement) {
 			oldFocusFn()
 			if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
   				targetElement.focus()
 			}
   		};
   	} else {
   		FastClick.prototype.focus = function(targetElement) {
 			if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
   				length = targetElement.value.length;
   				targetElement.setSelectionRange(length, length);
   				targetElement.focus()
 			} else {
  				targetElement.focus();
 			}
   		}
    }
   }