首页 > 代码库 > H5页面软键盘常见问题
H5页面软键盘常见问题
一、需求:进入页面自动聚焦输入框,并弹出软键盘
实测
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); } }) }
本文出自 “陈安一” 博客,请务必保留此出处http://dabaozi.blog.51cto.com/8032088/1923321
H5页面软键盘常见问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。