解决input框在ios机型上需要连续双击才能调起键盘的问题

最新推荐文章于 2024-03-20 09:23:43 发布

StoneVivi

最新推荐文章于 2024-03-20 09:23:43 发布

阅读量2.2k

点赞数 1

分类专栏：移动端

本文链接：https://blog.csdn.net/StoneVivi/article/details/107431239

版权

移动端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

解决input框在ios机型上需要连续双击才能调起键盘的问题

问题：移动端点击事件需要双击

众所周知，移动端的click（点击）事件有300ms的延迟。最主观的感觉就是需要连续点击两次或多次才会有反应。一般情况下，会推荐将pc端的click事件替换成tap，但是这样处理并不能解决input框的点击事件需要双击问题。

解决方案

fastClick
具体实现代码如下：

fixFastclick (FastClick) {
	let deviceIsIOS = /IP(ad|hone|od)/.test(navigator.userAgent)
	FastClisk.prototype.fouce = (targetElement) {
		let length
		if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('data') !== 0 && targetElement.type !== 'time' && tagetElement.type !== 'month' && targetElement.type !== 'email') {
			length = targetElement.value.length
			targetElement.focus()
			targetElement.setSelectionRange(length, length)
		} else {
			targetElement.focus()
		}
	}
}

将以上代码挂载至Vue原型上即可。