总结几个移动端H5软键盘的大坑【实践】
bigegpt 2024-10-12 06:28 4 浏览
转载链接：https://segmentfault.com/a/1190000022115177
1、部分机型软键盘弹起挡住原来的视图
解决方法：可以通过监听移动端软键盘弹起
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。参数如下。
- true，表示元素的顶部与当前区域的可见部分的顶部对齐
- false，表示元素的底部与当前区域的可见部分的尾部对齐
Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。此方法是标准的Element.scrollIntoView()方法的专有变体。
window.addEventListener('resize', function() {
if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
window.setTimeout(function() {
if ('scrollIntoView' in document.activeElement) {
document.activeElement.scrollIntoView(false)
} else {
document.activeElement.scrollIntoViewIfNeeded(false)
}
}, 0)
}
})2、ios 键盘收起时页面没有回落，底部会留白
部分苹果手机填写表单的时候的，输入内容后关闭软键盘，底部会留一块空白。这种情况可以通过监听键盘回落时间滚动到原来的位置。
window.addEventListener('focusout', function() {
window.scrollTo(0, 0)
})
//input输入框弹起软键盘的解决方案。
var bfscrolltop = document.body.scrollTop
$('input')
.focus(function() {
document.body.scrollTop = document.body.scrollHeight
//console.log(document.body.scrollTop);
})
.blur(function() {
document.body.scrollTop = bfscrolltop
//console.log(document.body.scrollTop);
})3、onkeyUp 和 onKeydown 兼容性问题
部分 ios 机型 中 input 键盘事件 keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件，在安卓手机浏览器中没有问题，但是在 ios 手机浏览器中用输入法输入之后，并未立刻响应 keyup 事件
- onkeypress 用户按下并放开任何字母数字键时发生。系统按钮（箭头键和功能键）无法得到识别。
- onkeyup 用户放开任何先前按下的键盘键时发生。
- onkeydown 用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。
4、ios12 输入框难以点击获取焦点，弹不出软键盘
定位找到问题是 fastclick.js 对 ios12 的兼容性，可在 fastclick.js 源码或者 main.js 做以下修改
FastClick.prototype.focus = function(targetElement) {
var length
if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
length = targetElement.value.length
targetElement.setSelectionRange(length, length)
targetElement.focus()
} else {
targetElement.focus()
}
}5、fastclick 导致下拉框焦点冲突
移动端使用 fastclick 之后，在 ios 环境下，有几个连续的下拉框 第一个 select 框突然填充了第二个下拉框的内容。
根本原因是 Fastclick 导致 ios 下多个 select ，点击某一个，焦点不停变换的 bug。修改源码，在 onTouchStart 事件内判断设备是否为 ios，再判断当前 nodeName 是否为 select，如果是 return false 去阻止 fastClick 执行其他事件。
github 源码地址：fastclick.js
//line 391行
FastClick.prototype.onTouchStart = function(event) {
//在其方法中添加判断 符合ios select的时候 不返回事件
if (deviceIsIOS && this.targetElement == 'select') this.targetElement = null
event.preventDefault()
}
//line521 或者讲源码中 有关touchEnd判断非ios或者非select的事件注释，
if (!deviceIsIOS || targetTagName !== 'select') {
this.targetElement = null
event.preventDefault()
}6、ios 下 fixed 失效的原因
软键盘唤起后，页面的 fixed 元素将失效，变成了 absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。
解决方法: 不让页面滚动，而是让主体部分自己滚动,主体部分高度设为 100%，overflow:scroll
<body>
<div class='warper'>
<div class='main'></div>
<div>
<div class="fix-bottom"></div>
</body>.warper {
position: absolute;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; /* 解决ios滑动不流畅问题 */
}
.fix-bottom {
position: fixed;
bottom: 0;
width: 100%;
}7、ios 键盘换行变为搜索
- input type="search"
- input 外面套 form，必须要有 action，action="javascript:return true"
- 表单提交阻止默认提交事件
<form action="javascript:return true" @submit.prevent="formSubmit">
<input type="search" placeholder="请输入诉求名称" id="search" />
</form>相关推荐
- Redis集群对比:主从复制、哨兵模式、Cluster一文看懂所有优缺点
-
在分布式系统中，Redis作为高性能的内存数据库，其集群方案的选择直接影响到系统的稳定性、可用性和扩展性。本文将全面对比Redis的三种主流集群方案：主从复制、哨兵模式和Cluster模式，帮助开发者...
- redis的主从复制，读写分离，主从切换
-
当数据量变得庞大的时候，读写分离还是很有必要的。同时避免一个redis服务宕机，导致应用宕机的情况，我们启用sentinel(哨兵)服务，实现主从切换的功能。redis提供了一个master,多个sl...
- # Redis 入门到精通(九)-- 主从复制(3)
-
#Redis入门到精通（九）--主从复制（3）##一、redis主从复制-常见问题（1）###1、伴随着redis系统的运行，master的数据量会越来越大，一旦master重启...
- redis - 主从复制（Redis主从复制时序图）
-
1引言在上一篇文章中，我们了解了Redis两种不同的持久化方式，Redis服务器通过持久化，把Redis内存中持久化到硬盘当中，当Redis宕机时，我们重启Redis服务器时，可以由RDB文件或AO...
- # Redis 入门到精通(九)-- 主从复制(2)
-
#Redis入门到精通（九）--主从复制（2）##一、redis主从复制--数据同步阶段注意事项###1、数据同步阶段master说明1）如果master数据量巨大，数据同步阶段应...
- Redis主从复制（redis主从复制主节点挂了）
-
介绍Redis有两种不同的持久化方式，Redis服务器通过持久化，把Redis内存中持久化到硬盘当中，当Redis宕机时，我们重启Redis服务器时，可以由RDB文件或AOF文件恢复内存中的数据。不过...
- 深入解析 Redis 集群的主从复制实现方式
-
在互联网大厂的后端开发领域，Redis作为一款高性能的内存数据库，被广泛应用于缓存、消息队列等场景。而Redis集群中的主从复制机制，更是保障数据安全、实现读写分离以及提升系统性能的关键所在。今...
- Redis主从架构详解（redis主从架构高可用如何实现）
-
Redis主从架构搭建Redis主节点配置创建主节点目录（/opt/redis-master），复制redis.conf到该目录下，redis.conf配置项修改#后台启动daemonizeyes...
- 抖音“四大包塘战神”:承包了全网的快乐
-
在抖音钓鱼垂类领域，"包塘战神"军团正掀起一场黑色幽默风暴。空军华、大表坑、李赔光、透心良四位创作者，以承包鱼塘为舞台，用连续翻车的钓鱼直播构筑起流量奇观。当钓鱼佬在抖音集体转型喜剧人...
- ORACLE 11G RAC 安装-通过VM配置共享磁盘
-
简介：在自己的电脑上通过VM软件搭建Oracle11GRAC，通过修改VM的参数文件来实现磁盘共享！目标：搭建RAC环境实现：使用VMwareWorkstation8.0.0+ORACLE...
- Linux操作系统安全配置（linux系统安全配置包括）
-
一、服务相关命令systemctlenable服务名#开机自启动systemctldisable服务名#禁用开机自启动systemctlstop服务名#停止服务systemctls...
- 关于Linux性能调优中网络I/O的一些笔记
-
写在前面和小伙伴分享一些Linux网络优化的笔记,内容很浅，可以用作入门博文内容结合《Linux性能优化》读书笔记整理涉及内容包括常用的优化工具(mii-tool,ethtool,ifconfig,i...
- 从 Sonatype Nexus Repository Manager 迁移到 Artifactory
-
1.Nexus1.1下载下载链接：https://help.sonatype.com/repomanager3/product-information/download/download-archiv...
- Ubuntu20安装zabbix5.0企业监控系统亲测教程
-
前言示例主机：zabbix10.0.100.10，将安装在UbuntuServer上教程说明：因使用官方教程无法安装成功，所以本教程与官方教程有所不同安装前提：已安装UbuntuServer2...
- Linux内核设计与实现—进程管理（linux内核程序设计）
-
进程进程就是处于执行期的程序(目标码存放在某种存储介质上)。进并不仅仅局限于一段可执行程序代码(Unix称其为代码段，textsection)。通常进程还要包含其他资源，像打开的文件，挂起的信号，...
- 一周热门
- 最近发表
- 标签列表
-
- mybatiscollection (79)
- mqtt服务器 (88)
- keyerror (78)
- c#map (65)
- xftp6 (83)
- bt搜索 (75)
- c#var (76)
- xcode-select (66)
- mysql授权 (74)
- 下载测试 (70)
- linuxlink (65)
- pythonwget (67)
- androidinclude (65)
- libcrypto.so (74)
- linux安装minio (74)
- ubuntuunzip (67)
- vscode使用技巧 (83)
- secure-file-priv (67)
- vue阻止冒泡 (67)
- jquery跨域 (68)
- php写入文件 (73)
- kafkatools (66)
- mysql导出数据库 (66)
- jquery鼠标移入移出 (71)
- 取小数点后两位的函数 (73)