【小贴士】虚拟键盘与fixed带给移动端的痛!

前言

今天来公司的主要目的就是研究虚拟键盘与fixed的问题,期间因为同事问起闭包与事件委托(阻止冒泡)相关问题,便穿插了一篇别的:

【小贴士】工作中的”闭包“与事件委托的”阻止冒泡“,有兴趣的朋友可以去看看,因为首页只能放一篇,这个就略去了

现在回到主要研究点,首先在移动端我们点击文本框后会出现一个虚拟键盘, 虚拟键盘让页面可视区域得到了充分利用,但是也带来了一些问题

问题源头

移动端虚拟键盘出现的条件是:文本框(文本类)获得焦点

但是文本框获得焦点未必会弹出键盘!!!

收起虚拟键盘的条件是:文本框失焦

PS:总而言之,我们认为会出现或者消失虚拟键盘的时候都可能不工作

在移动设备上,如果文本框在上方,点击不会有什么问题:
在设备的最下面的话,就有所不同了,整个块会上移,以将input区域显示出来

这个时候几个棘手的问题就出现了:

① 虚拟键盘的出现对页面来说是不可知的,这句话的理解是:没有键盘出现事件,没有办法获取键盘高度

② 键盘是“贴”在了viewport上,表面上不会对dom产生“任何”影响,但是这个时候一些定位元素的表现却变得“怪异”

比如:





可以看到,无论淘宝或者新浪,这个问题都存在,现在比较普遍的解决方案都是:移动端不采用fixed属性

于是我们来看看是否有其它方案

iscroll是否能解决

其实这个方案在周四的时候我便测试过了,但是结果让人很遗憾



作为官方给出的例子,在虚拟键盘弹出来后,光标会乱跑,这个还可以接受,但是:

① 头部不见了

② 偶尔不能显示获得焦点的input

这两个问题就让人难以接受了,于是,我们需要找到其他方案

解决方案

其实这个问题如果真要较真的话,我觉得需要深入研究两个知识点:

① viewport的原理

② 虚拟键盘的原理

就我手里现有资源来说,两个知识点一个都不深入,所以只能先从应用层面解决问题

应用层面解决方案

我们想到这么一个场景,如果我们能监控到键盘的行为,如果能的话,我们便可以

① 键盘弹出时候将fixed元素设置为static

② 键盘消失时候将fixed元素设置为fixed

那么我们能吗???

虽然这个方案比较恶心,我们还真能......答案是监控dom变化!

监控键盘

监控的方式其实筛选下来也不过两种:

① 时钟setInterval不停监控

② 系统级别的监控,比如键盘出现时候通知window一个事件,但是很遗憾现在还没有这个事件,但是这个事件等于

input类元素获取焦点 == 弹出虚拟键盘

input类元素失去焦点 == 收起虚拟键盘

但是我们前面已经说过,上面的原则不一定可靠,所以该种方案也未必可靠了

基于系统监控这点,我们还可以监控resize事件或者scroll事件,但是经过我的测试,setInterval表现比较好

于是,我们简单写一段代码,可靠是否满足需求:

复制代码
window.alert = function (msg) {
$('body').append('<div>' + msg + '</div>')
};
function fixedWatch(el) {
if(document.activeElement.nodeName == 'INPUT'){
el.css('position', 'static');
} else {
el.css('position', 'fixed');
}
}

setInterval(function () {
fixedWatch($('#headerview header'));
}, 500);
复制代码
根据测试结果来说,是满足我们的需求的,这里的header不会出问题,但是footer由于没有处理仍然会错位


于是这个问题似乎被我们修复了,但是你可以接受吗???这个方案有一个致命的恶心点!

不停的监控dom变化,浪费资源

那么这个问题可优化么?

似乎是可优化的,但是依旧会带来很多问题,优化的入口与出口便是input标签的focus事件

至于其失焦相关的事件便不予关注了,因为可能由一个input跳到另一个input

复制代码
setTimeout(function () {
$('#dl_app img').hide();
}, 100);

window.alert = function (msg) {
$('body').append('<div>' + msg + '</div>')
};

window.res = null;
var i = 0;

function fixedWatch(el) {
alert(i++);
if(document.activeElement.nodeName == 'INPUT'){
el.css('position', 'static');
} else {
el.css('position', 'fixed');
if(window.res ) { clearInterval(window.res ); window.res  = null; }
}
}

$('input').focus(function () {
if(!window.res) {
fixedWatch($('#headerview header'));
window.res = setInterval(function () {
fixedWatch($('#headerview header'));
}, 500);
}
});
复制代码
这样的话,貌似能让代码看上去舒服一点,但是其代价却是所有input类标签都会多一个获得焦点事件,依旧令人痛惜

结语

今天的学习暂时到此,对于虚拟键盘的出现其实可能还有其他的问题,举一个例子来说:

如果我们点击按钮时候会出一个toast在中间,但是虚拟键盘刚好遮住了toast提示信息怎么办呢?这个问题与上述问题其实是一致的

然后这个解决方案的可接受程度,以及其实际是否解决了问题又或者引起了其它问题就需要实际证明了

至于各位有什么好的解决方案,或者想法,可以讨论讨论哦!!!

好了,今天暂时到这里,我们下次继续,如果有可能我们会详细学习下viewport以及虚拟键盘相关



本文转自叶小钗博客园博客,原文链接http://www.cnblogs.com/yexiaochai/p/3561939.html,如需转载请自行联系原作者

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

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

相关文章

[OJ] Wildcard Matching (Hard)

LintCode 192. Wildcard Matching (Hard)LeetCode 44. Wildcard Matching (Hard) 第二次刷还是被这题虐. 其实就是跪在一个地方, 就是关于mustFail的地方. 当*p && !*s的时候, 说明s已经被用完了, p还没有被穷尽, 这种情况下要直接退出所有的递归返回false, 因为s都匹配…

CSS3 -webkit-transition(属性渐变)

-webkit-transition&#xff1a;CSS属性(none|all|属性) 持续时间 时间函数 延迟时间 CSS属性(transition-property)&#xff1a;要变化的属性&#xff0c;比如元素变宽则是width&#xff0c;文字颜色要变色这是color&#xff1b;W3C给出了一个可变换属性的列表&#xff1a;…

vxworks的default boot line说明

boot程序的主要功能是引导vxworks 内核,所以boot程序需要知道vxworks的内核存放在何处&#xff0c;通过什么手段去获取。在vxworks缺省的boot程序里有一条内建的default boot line,它指明了获得vxworks内核的途径&#xff0c;在boot程序启动时&#xff0c;它先寻找NVRAM里面有无…

【机器视觉】——相机和镜头的选择

目录 1、相机选择 2、镜头选择 3、其他计算公式 1)芯片尺寸计算:

React Native中pointerEvent属性

在React Native界面开发中, 如果使用绝对定位布局,在代码运行时的某个时刻有可能会遮盖住它的下方的某个组件。这是因为绝对定位只是说这个组件的位置由它父组件的边框决定。 绝对定位的组件可以被认为会覆盖在它前面布局&#xff08;JSX代码顺序&#xff09;的组件的上方. 如果…

Rar Java Zip

http://wolfdream.iteye.com/blog/428588转载于:https://www.cnblogs.com/diyunpeng/p/5218381.html

库卡机器人CELL程序解析

KUKA机器人 CELL程序 解析及注释&ACCESS RVP&REL 4&COMMENT HANDLER on external automaticDEF CELL ( );EXT EXAMPLE1 ( );EXT EXAMPLE2 ( );EXT EXAMPLE3 ( ) ;FOLD INITDECL CHAR DMY[3]DMY[]"---";ENDFOLD (INIT);FOLD BASISTECH INIIR_STOPM ( )…

Ubuntu 16.04服务器安装及软件配置

1.配置静态地址 vim /etc/network/interfaces auto enp1s0 iface enp1s0 inet static address 192.168.1.131 netmask 255.255.255.0auto enp2s0 iface enp2s0 inet static address 192.168.2.131 netmask 255.255.255.0auto enp3s0 iface enp3s0 inet static address 192.168.…

[软件测试airtest软件安装]——填坑

目录 1、安装Python环境&#xff08;版本问题&#xff09; 2、连接手机出现连接上了但是无法进行点击 airtest官网&#xff1a; https://airtest.doc.io.netease.com/for_newer/ 关于软件测试刚入门的可以参考进行了解&#xff1a;https://airtest.doc.io.netease.com/tuto…

KUKA 机器人SPS.SUB程序解析

&ACCESS RVO&COMMENT PLC on controlDEF SPS ( );FOLD DECLARATIONS;FOLD BASISTECH DECL;Automatik externDECL STATE_T STAT定义STATE_T类型的变量。该结构为&#xff1a;STRUC STATE_T CMD_STAT RET1&#xff0c; CMD_STAT是枚举类型数据&#xff0c;组成了STATE_…

jquery validate表单验证插件

1 表单验证的准备工作 在开启长篇大论之前&#xff0c;首先将表单验证的效果展示给大家。 1.点击表单项&#xff0c;显示帮助提示         2.鼠标离开表单项时&#xff0c;开始校验元素    3.鼠标离开后的正确、错误提示及鼠标移入时的帮助提醒 对于初学者而言&…

【Python位运算】——左移操作(<<)右移操作>>

目录 左移操作 右移操作 其他博主的理解 应用——力扣题目78. 子集 解法 深度优先搜索 位运算 参考文献 左移操作 # 左移操作&#xff0c;左移一位相当于乘以b&#xff0c;a<<b,a a*(2^b) print(2<<3) # 2*2^3 16&#xff0c;2的二进制10&#xff0c;向…

sql中字段名中包含特殊字符的查询方法

sql中字段名章包含特殊字符的查询方法&#xff1a;例如包含""&#xff0c;student表中字段为&#xff1a;id“学号”、name"姓名"。 解决办法&#xff1a;用英文下的 ""&#xff08;Tab键上面那个键,不需要shift&#xff09;把字段名包起来。如&…

tomcat Server.xml Context配置

有时候需要在tomcat里面做特殊的配置&#xff0c;来进行访问&#xff1a; 例如你的程序 名字是hello端口是80 这时候你要访问你的程序 就要用 localhost/hello 来访问了。 但是怎么直接用 localhost来访问呢&#xff1f;就需要进行tomcat 的配置了呢 看以下配置&#xff1a;to…

绝望,绝望、希望

晚上&#xff0c;经历了一场小小的绝望&#xff0c;因为在论文方面&#xff0c;经过一些实践检验&#xff0c;我发现之前所提出的理论竟然差别太大&#xff0c;这件事情让人感到绝望&#xff0c;但是&#xff0c;也只有被逼继续前行&#xff0c;没有退路&#xff0c;前行才能慢…

【Python数据结构】——二叉查找树(查找、构建、删除、插入、打印)

#!/usr/bin/env python # -*- coding: utf-8 -*- # Time : 2021/7/15 0:34 # Author : linlianqin # Site : # File : 二叉查找树类实现&#xff08;查找、创建、删除、插入、遍历&#xff09;.py # Software: PyCharm # description:class TreeNode:def __init__(s…

ABB RAPID SOCKET编程

相传在2009年6月11日&#xff0c;微博的鼻祖t-w-i-t-t-e-r还没有被封锁的时候&#xff0c;于仁颇黎写了了一个东西可以将staubli机器人在运行时的状态&#xff0c;实时发送上去&#xff0c;可以被实时的查看&#xff0c;任何一个人都可以查看&#xff0c;于是就有了这个名为TWI…

Plupload文件上传组件使用API

Plupload有以下功能和特点&#xff1a; 1、拥有多种上传方式&#xff1a;HTML5、flash、silverlight以及传统的<input type”file” />。Plupload会自动侦测当前的环境&#xff0c;选择最合适的上传方式&#xff0c;并且会优先使用HTML5的方式。所以你完全不用去操心当前…

广告主产品推词中的NLP

加词&#xff0c;加产品&#xff0c;调价是广告主的核心问题&#xff0c;为了解决广告主加词的问题在阿里巴巴以及速卖通的账户后台提供了加词利器——先知&#xff0c;一键解决广告主烦恼&#xff0c;从此不再为加词而忧愁。一 引言 在目前付费搜索引擎中&#xff0c;买词和竞…

Android 动态设置 layout_centerInParent

RelativeLayout.LayoutParams rp new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);rp.addRule(RelativeLayout.CENTER_IN_PARENT);记录一下转载于:https://www.cnblogs.com/IWings/p/6097134.html