H5页面软键盘常见问题
2017-05-08 16:11
148 查看
一、需求:进入页面自动聚焦输入框,并弹出软键盘
实测1、通过js执行focus(),安卓下只聚焦,出现光标,不弹出软键盘;IOS下连光标都未出现。2、增加autofocus属性,结果同上。3、将代码放入延迟函数setTimeout 中执行,结果同上。4、通过button点击执行focus(),文本框聚焦且弹出软键盘
解决方案:1、通过点击屏幕的其他区域,然后触发input的focus事件,唤起键盘:进入页面后,给页面加一层遮罩层,点击遮罩层时关闭该层并执行focus()。2、重写input输入框及软键盘
二、问题:当输入信息时弹出软键盘,因手机屏幕有限汪汪会遮住输入框
解决方案:scrollIntoViewIfNeeded:只在当前元素在视窗的可见范围内不可见的情况下,才滚动浏览器窗口或容器元素,最终让当前元素可见。当虚拟键盘弹出的时候,window的resize事件会被触发。监听input元素的focus事件,以及window的resize事件。因为focus事件将在resize事件前触发。然后通过scrollIntoViewIfNeeded使输入框可见。
1、监听input元素的focus事件
2、监听window的resize事件
实测1、通过js执行focus(),安卓下只聚焦,出现光标,不弹出软键盘;IOS下连光标都未出现。2、增加autofocus属性,结果同上。3、将代码放入延迟函数setTimeout 中执行,结果同上。4、通过button点击执行focus(),文本框聚焦且弹出软键盘
解决方案:1、通过点击屏幕的其他区域,然后触发input的focus事件,唤起键盘:进入页面后,给页面加一层遮罩层,点击遮罩层时关闭该层并执行focus()。2、重写input输入框及软键盘
二、问题:当输入信息时弹出软键盘,因手机屏幕有限汪汪会遮住输入框
解决方案:scrollIntoViewIfNeeded:只在当前元素在视窗的可见范围内不可见的情况下,才滚动浏览器窗口或容器元素,最终让当前元素可见。当虚拟键盘弹出的时候,window的resize事件会被触发。监听input元素的focus事件,以及window的resize事件。因为focus事件将在resize事件前触发。然后通过scrollIntoViewIfNeeded使输入框可见。
1、监听input元素的focus事件
var inputs = document.getElementsByTagName("input"); for (var i = 0; i< inputs.length; i++) { inputs[i].onclick = function (e) { window.setTimeout(function () { e.target.scrollIntoViewIfNeeded(); }, 0); } }
2、监听window的resize事件
if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded(); }, 0); } }) }
相关文章推荐
- H5,软键盘弹出,页面变形问题
- 【移动端H5开发】iOS下页面底部的input被弹出键盘遮挡问题
- H5页面ios键盘遮挡input问题
- 常见php页面漏洞分析及相关问题解决
- IIS常见问题:您正在搜索的页面可能已经删除、更名或暂时不可用
- IIS常见问题:“您正在搜索的页面可能已经删除、更名或暂时不可用。”
- 在进行页面的DIV CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。
- 键盘回车事件导致页面刷新的问题
- 一些页面常见的问题与解决代码
- Android 输入法键盘和activity页面遮挡问题解决
- js页面处理常见问题
- Android 输入法键盘和activity页面遮挡问题解决
- 键盘回车事件导致页面刷新的问题
- asp.net页面常见问题
- Android 输入法键盘和activity页面遮挡问题解决
- SharePoint常见问题二:找不到页面
- 常见php页面漏洞分析及相关问题解决
- 键盘回车事件导致页面刷新的问题
- 前端页面制作常见问题及解决方案
- 【CSDN常见问题解答】用HTTPClient自动登录Tomcat管理页面