当前位置：首页 > 人工智能

总结几个移动端H5软键盘的大坑

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() { documentdocument.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 执行其他事件。

//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>

总结几个移动端H5软键盘的大坑

相关推荐

为什么喜欢国外注册域名？国外注册域名注意什么？

手机自动化测试IDE --Airtest的安装和IDE控件详解

速看!今天我才知道UUID还分五个版本

使用Python自动化Microsoft Excel和Word

4.选择顶级的域名注册服务商

新时代布局中一些有意思的特性！