一、需求：进入页面自动聚焦输入框，并弹出软键盘
实测
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);
}
})
}亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
