1、在vue项目中安装fastclick插件

  1. npm install --save fastclick

2、在main.js中引入并绑定到body

  1. import FastClick from 'fastclick'
  2. FastClick.attach(document.body);

3、在项目中安装fastclick成功后测试会遇到以下问题:

  1. FastClick.prototype.focus = function(targetElement) {
  2. var length;
  3. var deviceIsWindowsPhone = navigator.userAgent.indexOf("Windows Phone") >= 0;
  4. var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone;
  5. //兼容处理:在iOS7中,有一些元素(如date、datetime、month等)在setSelectionRange会出现TypeError
  6. //这是因为这些元素并没有selectionStart和selectionEnd的整型数字属性,所以一旦引用就会报错,因此排除这些属性才使用setSelectionRange方法
  7. if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
  8. length = targetElement.value.length;
  9. targetElement.setSelectionRange(length, length); //修复bug ios 11.3不弹出键盘,这里加上聚焦代码,让其强制聚焦弹出键盘
  10. targetElement.focus();
  11. } else {
  12. targetElement.focus();
  13. }
  14. }
  1. var u = navigator.userAgent;
  2. var flag;
  3. var timer;
  4. var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  5. if (isIOS) {
  6. document.body.addEventListener('focusin', () => { //软键盘弹起事件
  7. flag = true;
  8. clearTimeout(timer);
  9. })
  10. document.body.addEventListener('focusout', () => { //软键盘关闭事件
  11. flag = false;
  12. if (!flag) {
  13. timer = setTimeout(() => {
  14. window.scrollTo({
  15. top: 0,
  16. left: 0,
  17. behavior: "smooth"
  18. }) //重点 =======当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变,并不一定要回到页面顶部)
  19. }, 200);
  20. } else {
  21. return false;
  22. }
  23. })
  24. } else {
  25. return false;
  26. }

fastclick插件中存在的bug的更多相关文章

  1. fastclick插件 导致 input[type="date"] 无法触发问题解决方案

    鄙人才疏学浅,新人一枚,不足之处还请谅解,写下这个也只是为了给大家分享一下我解决这个BUG的方法,也是自己的一个笔记. 首先,我们使用fastclick插件的初衷是解决“tap”事件“点透”的BUG: ...

  2. gulp-px2rem-plugin 插件的一个小bug

    最近在使用这个插件的过程中发现一个bug: 不支持 含有小数的形式. 查看源码后,修改了下其中的正则,使其支持小数形式(66.66px..6px ). 作者的源码最近一次更新都在两年前,所以就简单的记 ...

  3. 添加PMD插件扫描潜在的bug

    上一节使用checkstyle来规范你的项目主要解决了代码编码规范问题,比如缩进换行等.这次继续代码健康工具类PMD. 什么是PMD PMD真的不像checkstyle这样的东西所见即所得啊,去官网找 ...

  4. 详解jquery插件中;(function ( $, window, document, undefined )的作用

    在jquery插件中我们经常看到以下这段代码 1 2 3 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, wi ...

  5. 关于AFNetworking中header的bug问题

    关于AFNetworking中header的bug问题 [摘要:AFNetworking那个正在ios开辟中便未几道了,网上一搜一大推,然则详细用法我便没有道了,偶然间我会整顿一下详细的一些用法.本日 ...

  6. 在eclipse的maven插件中搜寻本地仓库中的jar搜索不到的解决方案

    在eclipse的maven插件中搜寻本地仓库中的jar搜索不到的解决方案 之前,用过maven管理项目的童鞋都知道本地会有一个${User_Home}.m2/repository仓库 是用来存放ja ...

  7. android插件中或者library中获取asstes文件

    在插件中或者library的项目中把文件放在asstes,不能用context.getResources().getAssets().open(fileName)读取到流,会报FileNotFound ...

  8. 关于RadAsm中GetEnvironmentStrings的BUG。

    今天在asm中不通过msvcrt.inc调用c库. 所以.第一时间就在vc的lib中拷贝了libc.lib问价.加入工程后. 声明.调用如下: 然后.链接报错. libc.lib(crt0.obj) ...

  9. 如何在Exe和BPL插件中实现公共变量共享及窗口溶入技术Demo源码

    如何在Exe和BPL插件中实现公共变量共享及窗口溶入技术Demo源码 1.Delphi编译方式介绍: 当我们在开发一个常规应用程序时,Delphi可以让我们用两种方式使用VCL,一种是把VCL中的申明 ...

随机推荐

  1. 从零配置webpack(react+less+typescript+mobx)

    本文目标 从零搭建出一套支持react+less+typescript+mobx的webpack配置 最简化webpack配置 首页要初始化yarn和安装webpack的依赖 yarn init -y ...

  2. android滑动标题栏渐变实现

    import android.graphics.Color; import android.os.Build; import android.os.Bundle; import android.sup ...

  3. 怎样提交社区项目Karbor的Bug?

    1.登录社区Karbor Launchpad地址: https://bugs.launchpad.net/karbor/+filebug 输出bug简介,点击Next按钮. 2.填写Bug描述,完成B ...

  4. 123457---小小数学家--com.twoapp.xiaoxiaoshuxuejia

    小小数学家--com.twoapp.xiaoxiaoshuxuejia

  5. Python - Django - 作者表多对多关联书籍表

    models.py 代码: from django.db import models # Create your models here. # 出版社 class Publisher(models.M ...

  6. Linux下-bash: Permission denied 或者 sudo: command not found 错误

    有时候执行一个脚本或者运行一个可执行文件时,如执行脚本./foo.sh,会报错-bash: ./foo.sh: Permission denied,你会再试sudo ./foo.sh,发现继续报错su ...

  7. 解决安装eclipse时出现"Failed to load JNI shared library"

    下午远程帮别人弄了很久的eclipse,安装时老是出现如图的字样 最后在安装配置文件中找到问题所在,这个最新版本的eclipse需要jdk1.8的环境,由于系统的jdk是1.7,版本过低从而导致安装失 ...

  8. 【数据库开发】windows环境下通过c++使用redis

    1.Windows下Redis的安装使用 Redis是一个key-value存储系统.Redis的出现,很大程度补偿了memcached这类key/value存储的不足,在部 分场合可以对关系数据库起 ...

  9. Dapper存储过程以及多次查询和批量写入操作

    一.存储过程操作 1. 准备存储过程 newsreturnvalue(该存储过程计算2个参数的和并返回) USE [ZPC.Contact] GO SET ANSI_NULLS ON GO SET Q ...

  10. linux环境上报异常java.lang.NoSuchMethodError

    23-Apr-2019 18:11:35.545 INFO [http-nio-10052-exec-10] org.apache.catalina.core.ApplicationContext.l ...