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

  • 现象: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();
 			}
   		}
    }
   }


引用:https://codeleading.com/article/78482239378/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值