fastclick插件中存在的bug
1、在vue项目中安装fastclick插件
npm install --save fastclick
2、在main.js中引入并绑定到body
import FastClick from 'fastclick'
FastClick.attach(document.body);
3、在项目中安装fastclick成功后测试会遇到以下问题:
- os input点击不灵敏
解决方法:vue项目中使用fastclick时ios input点击不灵敏
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();
}
}
- os 软键盘关闭后 页面不会回弹
解决方法:解决IOS中input失焦后,页面上移,点击不了问题
var u = navigator.userAgent;
var flag;
var timer;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isIOS) {
document.body.addEventListener('focusin', () => { //软键盘弹起事件
flag = true;
clearTimeout(timer);
})
document.body.addEventListener('focusout', () => { //软键盘关闭事件
flag = false;
if (!flag) {
timer = setTimeout(() => {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth"
}) //重点 =======当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变,并不一定要回到页面顶部)
}, 200);
} else {
return false;
}
})
} else {
return false;
}
fastclick插件中存在的bug的更多相关文章
- fastclick插件 导致 input[type="date"] 无法触发问题解决方案
鄙人才疏学浅,新人一枚,不足之处还请谅解,写下这个也只是为了给大家分享一下我解决这个BUG的方法,也是自己的一个笔记. 首先,我们使用fastclick插件的初衷是解决“tap”事件“点透”的BUG: ...
- gulp-px2rem-plugin 插件的一个小bug
最近在使用这个插件的过程中发现一个bug: 不支持 含有小数的形式. 查看源码后,修改了下其中的正则,使其支持小数形式(66.66px..6px ). 作者的源码最近一次更新都在两年前,所以就简单的记 ...
- 添加PMD插件扫描潜在的bug
上一节使用checkstyle来规范你的项目主要解决了代码编码规范问题,比如缩进换行等.这次继续代码健康工具类PMD. 什么是PMD PMD真的不像checkstyle这样的东西所见即所得啊,去官网找 ...
- 详解jquery插件中;(function ( $, window, document, undefined )的作用
在jquery插件中我们经常看到以下这段代码 1 2 3 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, wi ...
- 关于AFNetworking中header的bug问题
关于AFNetworking中header的bug问题 [摘要:AFNetworking那个正在ios开辟中便未几道了,网上一搜一大推,然则详细用法我便没有道了,偶然间我会整顿一下详细的一些用法.本日 ...
- 在eclipse的maven插件中搜寻本地仓库中的jar搜索不到的解决方案
在eclipse的maven插件中搜寻本地仓库中的jar搜索不到的解决方案 之前,用过maven管理项目的童鞋都知道本地会有一个${User_Home}.m2/repository仓库 是用来存放ja ...
- android插件中或者library中获取asstes文件
在插件中或者library的项目中把文件放在asstes,不能用context.getResources().getAssets().open(fileName)读取到流,会报FileNotFound ...
- 关于RadAsm中GetEnvironmentStrings的BUG。
今天在asm中不通过msvcrt.inc调用c库. 所以.第一时间就在vc的lib中拷贝了libc.lib问价.加入工程后. 声明.调用如下: 然后.链接报错. libc.lib(crt0.obj) ...
- 如何在Exe和BPL插件中实现公共变量共享及窗口溶入技术Demo源码
如何在Exe和BPL插件中实现公共变量共享及窗口溶入技术Demo源码 1.Delphi编译方式介绍: 当我们在开发一个常规应用程序时,Delphi可以让我们用两种方式使用VCL,一种是把VCL中的申明 ...
随机推荐
- 最新解决Chrome(版本76.0.3809.100) “请停用以开发者模式运行的扩展程序”的方法
最新解决Chrome(版本76.0.3809.100) “请停用以开发者模式运行的扩展程序”的方法 最近在远景论坛上发现了最新的解决Chrome浏览器提示:请停用以开发者模式运行的扩展程序的问题.该方 ...
- 阶段5 3.微服务项目【学成在线】_day18 用户授权_01-用户授权业务流程分析
1 用户授权业务流程 用户授权的业务流程如下: 业务流程说明如下: 1.用户认证通过,认证服务向浏览器cookie写入token( 身份令牌) 2.前端携带token请求用户中心服务获取jwt令牌 前 ...
- request cluster ID mismatch
删除了etcd集群所有节点中的--data_dir的内容 [root@node3 ~]# cd /var/lib/etcd/ [root@node3 etcd]# ls member [root@no ...
- 123457123457#1#-----com.threeapp.ErTongHuaXue01----儿童滑雪大冒险
123456123456#0#-----com.threeapp.ErTongHuaXue01----儿童滑雪大冒险
- c#操作json数据使用newtonsoft.json
开源项目提供的一个读取示例 using System; using System.Collections.Generic; using System.IO; using System.Linq; us ...
- 在Eclipse Android中设置模拟器屏幕大小
在Eclipse Android中设置模拟器屏幕大小是本文要介绍的内容,主要是来了解并学习Eclipse Android中模拟器的设置,具体关于Eclipse Android内容的详解来看本文. 方法 ...
- python2.7 升级到 python3.6
1.命令 yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel t ...
- selenium + python 环境配置 (二)之启动IE
安装好python.selenium工具后,下一步就是启动浏览器 1.启动IE浏览器 即Selenium 调用IEDriverServer打开IE浏览器 ,因此需下载对应的IEDriverServer ...
- Python hashlib加密模块
hashlib模块 简介: hashlib模块是一个提供了字符串加密功能的模块,包含MD5和SHA的加密算法.具体的加密支持有: MD5,sha1,sha224,sha256, sha384, sha ...
- mysql--简单操作
一.数据库的基本操作 查看当前所有存在的数据库 show databases; //mysql 中不区分大小写.(databank 是之前创建的) 创建数据库 create database data ...