有时候，为了优化用户体验，做交互设计的同学可能会希望让输入框自动获得焦点并弹出软键盘，这样用户不用点击输入框就可以直接输入。的确，这对用户来说很方便。但真正用HTML5页面去实现的时候，却遇到了问题。
首先我做了这样一个demo。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no, address=no, email=no, time=no">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
<title>Title</title>
<style>
#input1{
width: 200px;
line-height: 30px;
}
</style>
</head>
<body>
<input id="input1" type="text">
<script>
document.getElementById('input1').focus();
</script>
</body>
</html>
在iOS的机器上试验，可以实现需求。但在多台安卓机器上测试时，都发现无法拉起来软键盘。
接着我尝试了给input输入框加上autofocus属性、或者给 document.getElementById('input1').focus();加上延时执行，也都无效。
之后，我又尝试把<input id="input1" type="text">换成一个<div contenteditable="true" id="input1"></div>，再用JS控制它自动获得焦点，事实证明也是无效的。
最后找到一个可以部分解决问题的办法，就是通过一个按钮的click()方法去触发input框的focus()方法。代码清单如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no, address=no, email=no, time=no">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
<title>Title</title>
<style>
#input1{
width: 200px;
line-height: 20px;
border: 1px solid #b2b2b2;
padding: 5px;
}
</style>
</head>
<body>
<input id="input1" type="text">
<button id="btn">focus</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function () {
document.getElementById('input1').focus();
}
</script>
</body>
</html>
这个办法可以解决在点击一个按钮，不跳转页面的情况下打开一个弹层，让弹层中的输入框自动获得焦点并拉起软键盘的问题。注意，这里的点击按钮事件是需要手动触发的。如果不手动点击按钮，则即便用JS去触发按钮点击事件，也是不能拉起软键盘的。至于点击按钮后跳转到一个新页面的场景，用这种办法也是无法cover到的。
最后，顺便提一下，有一个方法可以在进入页面时就通过JS拉起软键盘，那就是进入页面时自动执行window.propmt()这个JS语句。遗憾的是，由于window.propmt()弹出的界面不可定制，实在太不美观，因而使用场景非常之有限。
时间： 2024-09-22 05:57:29