vue 全局键盘_如何解决ios input框唤起软键盘不灵敏问题?

为什么移动端点击事件要加300ms延迟呢?

早在 2007 年初,苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题。

e01fe5d46fe4b2fbfb2f85379339dfe7.png

这当中最出名的,当属双击缩放(double tap to zoom),这也是会有上述 300 毫秒延迟的主要原因。

双击缩放,顾名思义,即用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢?

d4bce7be7234478fd19fa52aee2ad357.png

假定这么一个场景: 用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕。 鉴于iPhone的成功,其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定,包括双击缩放,几乎现在所有的移动端浏览器都有这个功能。那时人们刚刚接触移动端的页面,不会在意这个300ms的延时问题,可是如今移动端如雨后春笋,用户对体验的要求也更高,这300ms带来的卡顿慢慢变得让人难以接受。

9a6b990b76cf8c402c7ede9227a442ba.png

那么如何解决300ms延迟问题呢?

我们就推荐一种最有效、最方便的解决方案,大家应该都用过这个方法,那就是FastClick.js。

d034a1e47848104060f11a4116553cae.png

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后的click事件阻止掉。

如何使用FastClick

npm install fastclick -S

如何你是vue项目可以在main.js里面直接引入,当然这样是全局的,如果你需要某个页面用到,那就单个页面引入。

//引入
import fastClick from 'fastclick'
//初始化FastClick实例。在页面的DOM文档加载完成后
fastClick.attach(document.body)

如果你用过FastClick在移动端,就会发现有一个体验很不好的问题,某些ios上,点击输入框想唤启软键盘,触点不是很灵敏,必须重压或长按才能成功唤启,快速点击是不会唤启软键盘的。

58102ca31b71745e84ed98b4350c8431.png

如何解决ios input框唤启软键盘不灵敏问题?

/*** @param {EventTarget|Element} targetElement*/
FastClick.prototype.focus = function(targetElement) {var length;// Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {length = targetElement.value.length;targetElement.focus();// 加入这一句话targetElement.setSelectionRange(length, length);} else {targetElement.focus();}
};

你可以直接去node_module里找到fastClick文件修改focus方法,但是不建议这样做。如果以后npm install,就会被覆盖。

c5e91f67ebf49744de6e1e370357a324.png

建议你在引用fastclick的地方,重写focus方法。如vue项目,你可以在main.js文件里面,引入fastclick模块后,重写focus方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/527655.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

css一个盒子里可以装3个图片并排吗_John: CSS浮动与清除浮动属性详解(CSS float clear)...

CSS里的浮动,可以让元素脱离标准流,从左上角或右上角依次贴边排列。下面这个案例将会帮我们了解浮动的基本情况。下面这段代码块,外面是一个大div,里面包含着3个div,第一个左浮动,后两个无浮动。//style样式…

连接驱动_在jdbc中完成对于jdbc参数、jdbc变量,加载驱动,创建连接的封装

JDBC简介JDBC中文含义:Java数据库连接,英文全称:Java Database Connectivity。它是Java语言中用来规范访问数据库的接口,提供了放多接口方法,例如查询 、更新、插入、删除等方法。另外一点要注意的是:JDBC是…

tensorflow 保存训练loss_tensorflow2.0保存和加载模型 (tensorflow2.0官方教程翻译)

最新版本:https://www.mashangxue123.com/tensorflow/tf2-tutorials-keras-save_and_restore_models.html英文版本:https://tensorflow.google.cn/alpha/tutorials/keras/save_and_restore_models翻译建议PR:https://github.com/mashangxue/t…

layui导入模板数据_数据可视化图表 教程echarts,第一讲

1我们写web项目,展示数据的地方,可能会使用到图表。今天就讲这个玩意。本教程暂时定为 三讲:(随后情况,如果有新的研究,会有所更新!)第一讲 饼图的使用第二讲 柱状图的使用第三讲 拆线图的使用此教程希望…

出发a标签_以用户标签为例,复盘B端产品的需求挖掘方法论

阅读指南受众人群:B端初级产品经理阅读收获:B端产品需求挖掘的一些技巧;了解用户标签/画像的一些业务知识。手上负责一个和数据方面有关的B端系统,在日常的产品规划当中,没有关于“用户标签”方面的规划,突…

字符ascii码值转换_没想到 Unicode 字符还能这样玩?

脚本之家你与百万开发者在一起来源 | 程序通事(ID:US_stocks)如若转载请联系原公众号上周的时候,朋友圈的直升飞机不知道为什么就火了,很多朋友开着各种花式飞机带着起飞。图片来自网络还没来得及了解咋回事来着,这个直升飞机就?…

右键菜单无响应_被流氓软件玩坏了?这两个清理工具拯救你凌乱的右键菜单。...

Hello 这里是一周进步我们写了四年近2000篇的干货文章,还分享了许多实用的神器工具,一路以来,感谢大家的支持与陪伴~文 / 一周进步 安哥拉如果你和我们一样,是一个喜欢在电脑上安装各种各样的软件的人,你的电脑右键菜…

python列表超出索引_python列表的切片操作允许索引超出范围

web开发的步骤前端知道是浏览器呈现的部分,相对于前端,后台你可以理解为服务器端专门处理.读取.存储数据库数据的部分. 因为网站是基于B\S架构,即浏览器---服务端架构,就程序来讲,可笼统划分为前端程序和服务器端程 ...const 指针的三种使用方式///const 指针的三种状态/ 注意:…

linux搭建mcpe服务器_Ubuntu Linux下搭建Minecraft我的世界服务器

总结一下在Ubuntu Linux下搭建Minecraft我的世界服务器的方法,其实非常简单直接。(1)、把当前的软件都更新到最新sudo apt-get updateMinecraft服务器需要Java支持。为了检查我们是否已经安装Java,我们执行下面的命令:java -version如果Java已…

supersocke接收不到数据_基于SuperSocket的北斗终端数据接收服务的设计与实现

基于SuperSocket的北斗终端数据接收服务的设计与实现刘朴,莫家勤*【摘要】北斗是我国自主研发的卫星导航定位系统,已经被广泛使用于各个领域,城市交通管理的核心是车辆监控,为了实现车辆的智能管理,获取车辆信息是首要任务,基于北斗二代的车载终端能够精确获取车辆信息,因此实现…

winform防止sqlserver注入_c# 防止sql注入对拼接sql脚本的各个参数处理

/// ///过滤标记/// /// 包括HTML,脚本,数据库关键字,特殊字符的源码/// 已经去除标记后的文字public string NoHtml(stringHtmlstring){if (Htmlstring null){return "";}else{//删除脚本Htmlstring Regex.Replace(Htmlstring, …

jsp mysql源码_jsp+servlet+mysql员工管理系统源代码下载

jspservletmysql员工管理系统项目截图注册页面登录页面添加员工编辑员工员工列表数据库建表语句/*Navicat MySQL Data TransferSource Server : localhostSource Server Version : 50509Source Host : localhost:3306Source Database : wdhdbTarget Server Type : MYSQLTarget …

mysql varchar(20)_MySQL中采用类型varchar(20)和varchar(255)对性能上的影响

MySQL建立索引时如果没有限制索引的大小,索引长度会默认采用的该字段的长度,也就是说varchar(20)和varchar(255)对应的索引长度分别为203(utf-8)(21),2553(utf-8)(21),其中"2"用来存储长度信息,“1”用来标记…

添加mysql至服务器_mysql 如何添加服务器

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":6,"count":6}]},"card":[{"des":"云服务器 ECS(Elastic Compute Service)是一…

vs里安装了mysql吗_vs2017安装 MySQL for Visual Studio 1.2.

vs2017安装想在win7EF6 VS2017 MySQL 但是安装MySQL for Visual Studio 1.2.7 时一直安装不上去,如下:Action 9:40:05: InstallFinalize.1: Action 9:40:05: DeleteRegKeyAndExtensionsFile_VS2013.1: Action 9:40:06: DeleteRegKeyAndExtensionsFile_…

var lib mysql ib_MYSQL问题解决

1、MySQL错误日志里出现:140331 10:08:18 [ERROR] Error reading master configuration140331 10:08:18 [ERROR] Failed to initialize the master info structure140331 10:08:18 [Note] Event Scheduler: Loaded 0 events从错误提示就可以看出和mster info相关&am…

mysql数据库优化语句_mysql数据库优化语句

mysql优化语句数据库语句: Ddl(数据定义语言) alter create drop Dml(数据操作语言) inset delete update www.2cto.com Dtl(数据事务语言) conmmit rollback savepoint Select Dcl(数据控制语句) grant赋权限 revoke回收 Mysql数据库优化: 1、 数据库表…

linux mysql 目录结构图_linux下mysql安装、目录结构、配置

1、准备安装程序(官方网站下载)服务端:MySQL-server-community-5.1.44-1.rhel4.i386.rpm客户端:MySQL-client-community-5.1.44-1.rhel4.i386.rpm2、安装(打印信息略)[rootlocalhost /]#rpm -ivh MySQL-server-community-5.1.44-1.rhel4.i386.rpm;[rootl…

php mysql删除失败_php mysql删除的代码哪里出错了?

<?phpsession_start ();if($_SESSION[droits]f){echo("vousn\avezpasdedroit");}include(dirname(__FILE__)."/includes/connexion.php");?>-//W3C//DTDHTML4...session_start();if ($_SESSION[droits] f){echo("vous n\avez pas de droit&q…

mysql rr 更新失败_RR 级别下 update 操作的是快照读还是当前读?

我们知道在 RR 级别下&#xff0c;重复的 select 操作&#xff0c;读取的值都会是一致的。即便在两次 select 操作的中间&#xff0c;有一个事务 B 修改了值&#xff0c;但是在事务 A 中 select 读取的值还是一致的。那么如果是 update 操作呢&#xff1f;之前在网上看到一篇博…