您创建了一个带有输入字段和“清除”按钮的表单,并且您期望:
- 当您输入内容并点击移动键盘上的“前往/搜索”按钮时,键盘应隐藏。
- 当您点击“清除”按钮时,输入应该被清除,但键盘保持打开状态。
有趣的是,它的工作方式完全相反:键盘会在提交表单后打开,并在清理输入后消失。
有什么办法让它“正确”吗?
代码,HTML
<form id="form">
<input id="input" type="search" autofocus />
</form>
<button id="clear">clear</button>
和JS
document.getElementById('form')
.onsubmit = function(e) { e.preventDefault() }
document.getElementById('clear')
.onclick = function(e) {
e.preventDefault()
var input = document.getElementById('input')
input.value = ''
// trying to focus to open keyboard, but it didn't work
input.focus()
}
最佳答案
我明白你是如何看待它的,但这只是某些事件在 JS 中默认如何工作的问题。
当您单击“清除”按钮时,您所做的就是将注意力从输入中转移出来,这反过来又会使键盘消失。由于您不再进行输入,键盘就会消失。
但是,当您单击“开始/继续/提交”按钮时,焦点仍保留在输入上,直到触发相应的表单操作。
我会:
- 在提交时强制在输入上执行 focusout 事件,并在单击“清除”后将焦点放在输入上,与您现在所做的相同;或
- 添加提交按钮以触发表单提交事件。这会将焦点从输入上移开,并将其放置在提交按钮上。
下面是选项 1 的代码片段:
document.getElementById('form')
.onsubmit = function(e) { e.preventDefault(); }
document.getElementById("form").onsubmit = function(e) {
e.preventDefault();
document.getElementById('input').blur();
};
document.getElementById('clear').onclick = function(e) {
e.preventDefault();
var input = document.getElementById('input');
input.value = '';
input.focus();
};
<form id="form">
<input id="input" type="search" autofocus />
</form>
<button id="clear">clear</button>
查看此CodePen供引用。
关于javascript - Android 键盘在表单提交后不隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48102564/