提交表单后未隐藏安卓键盘

Question

您使用输入字段和"清除"按钮创建一个表单，并且您希望：

• 当您键入内容并点击移动键盘上的"转到/搜索"按钮时，键盘应隐藏。
• 当您单击"清除"按钮时，输入应清除，但键盘保持打开状态。

有趣的是，它的工作方式恰恰相反：提交表单后键盘将被打开，并在清理输入后消失。

有没有办法让它"正确"？

代码，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()
  }

演示 https://codepen.io/anon/pen/rpGjGe?editors=1011

Answer 1

我明白你怎么会这样看，但这是某些事件在 JS 中默认如何工作的问题。

当您单击"清除"按钮时，您正在做的是专注于您的输入，这反过来又使键盘消失。由于您不再在输入上键入，因此键盘将消失。

但是，当您单击"开始/继续/提交"按钮时，焦点将保留在输入上，直到触发相应的表单操作。

我会：

在提交时强制将焦点事件放在输入上，
1. 并在单击"清除"后将焦点集中在输入上，与您现在所做的相同;或
2. 添加提交按钮以触发表单提交事件。这会将焦点从输入上移开，并将其放在提交按钮上。

下面是选项 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>

请参阅此代码笔以供参考。