您使用输入字段和“清除”按钮创建一个表单,您希望:
有趣的是,它完全相反:键盘将在提交表单后打开,并在清理输入后消失。
有没有办法让它“正确”?
代码,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()
}
但是z zxswい
我知道你怎么能看到它,但这是一个问题,默认情况下某些事件在JS中是如何工作的。
当你点击“清除”按钮时,你正在做的是从输入中聚焦,这反过来又是键盘消失的原因。由于您不再输入输入,键盘就会消失。
但是,当您单击“转到/继续/提交”按钮时,焦点将保留在输入上,直到相应的表单操作触发为止。
我要么:
以下是选项1的代码段:
https://codepen.io/anon/pen/rpGjGe?editors=1011
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>
以供参考。