Ios移动端fastClick导致 input触控不灵敏的解决办法！

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

安装完发现输入框点击变得不灵敏，第二次点击页面中的输入框需要长按一会才能正常唤起键盘输入。（安卓是正常的）

我用的是vue3 这里直接再main.js修改即可！
解决方案

// 引入
import fastClick from 'fastclick'
fastClick.attach(document.body)
fastClick.prototype.focus = function (targetElement) {let lengthif (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {length = targetElement.value.lengthtargetElement.focus()targetElement.setSelectionRange(length, length)} else {targetElement.focus()}
}

ios 软键盘关闭后 页面不会回弹(解决IOS中input失焦后，页面上移，点击不了问题)
解决方法：
const u = navigator.userAgent
let flag
let myFunction
const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
if (isIOS) {document.body.addEventListener('focusin', () => { // 软键盘弹起事件flag = trueclearTimeout(myFunction)})document.body.addEventListener('focusout', () => { // 软键盘关闭事件flag = falseif (!flag) {myFunction = setTimeout(function () {window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })// 重点  =======当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变，并不一定要回到页面顶部)}, 200)}})
}

最后再在全局文件添加以下样式

  -moz-user-select: none; //css 让文字不被选中-webkit-user-select: none; //禁止移动端用户用鼠标在页面上选中文字user-select: none; //禁止用户用鼠标在页面上选中文字
`

Ios移动端fastClick导致 input触控不灵敏的解决办法！相关推荐

笔记本触控板无法滑动解决办法
找到自己的驱动管理,我的是联想驱动管理然后检测自己的驱动,安装触控板,然后重启然后就发现了想要的东东... 如果有自带的电脑管家(比如联想电脑管家),也可以在电脑管家中进行修复驱动. 不过好像重新 ...
Unity Window触摸屏电脑和移动端Input触控，控制相机旋转缩放
Unity Window触摸屏电脑和移动端Input触控,控制相机旋转缩放原理就是获取手指滑动的偏移量,来计算代码帖出来 using UnityEngine; using System; usin ...
Android FrameWork Input触控事件处理流程笔记
一 Input 事件概念 input 是最常见的事件之一,用户的点击.滑动.长按等操作,都属于 input 事件驱动.Android系统是基于事件驱动, input 属于其中的一种.input 的核心 ...
华硕笔记本Win7系统下无法禁用触摸板-触控板：已解决
华硕笔记本Win7系统下无法禁用触摸板-触控板:已解决使用软件:华硕智能手势 ASUS Smart Gesture 官网上面即可下载,下载地址: http://dlcdnet.asus.com/pu ...
Vista下控件无法安装解决办法
Vista下控件无法安装解决办法 IE浏览器设置恢复为默认值: 1. 点击浏览器菜单栏上的工具->Internet选项->安全,选择internet区域,如[默认级别]按钮不是灰的, ...
使用Lock and Load X 插件时导致Final Cat Pro意外退出的解决办法
Lock and Load X是一款Mac平台上的视频稳定防抖插件,适用于FCPX.PR以及AE软件.lock and load x Mac版比PR和FCPX自带的防抖插件,功能更强大,效果更加突出, ...
苹果xr黑屏转圈圈解决方法_苹果iPhone XR升级iOS 12.3后黑屏转圈圈怎么办？附解决办法...
北京时间5月14日凌晨,苹果公司正式向iPhone 5S及以上机型推送了iOS 12.3正式版,本次更新包大小约在500MB左右,主要更新内容为支持启用[隔空播放2]的电视,根据更新介绍显示,&quo ...
安全狗php站点404,开启安全狗响应内容保护导致404返回200状态码的解决办法
开启安全狗响应内容保护导致404返回200状态码的解决办法 2020-04-08 开启安全狗响应内容保护导致404状态码返回200的解决办法今天无意中对www.tbadc.com的404错识做了一个 ...
分享导致网站被K的原因及解决办法
相信很多站长都遇到过这样的情况,某天自己网站关键词排名和收录突然暴跌,其实这时可能就要看看是不是网站被K了,判断方法可以看懒猫之前写的文章:南京seo:怎么看出网站首页是否被搜索引擎降权呢,如果被K了 ...

Ios移动端fastClick导致 input触控不灵敏的解决办法！

Ios移动端fastClick导致 input触控不灵敏的解决办法！相关推荐

最新文章

热门文章