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中默认工作的问题。

当您点击＆＃34;清除＆＃34;按钮，你正在做的是从你的输入聚焦，这反过来又是键盘消失的原因。由于您不再输入输入，键盘就会消失。

然而，当你点击＆＃34;去/继续/提交＆＃34;按钮，焦点保持在输入上，直到相应的表格动作触发。

我要么：

在提交时强制输入焦点事件，并在点击＆＃34;清除＆＃34;后专注于输入，与您现在一样; OR
添加提交按钮以触发表单提交事件。这将删除输入的焦点并将其放在提交按钮上。

以下是选项1的代码段：

＆＃13;

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();
};

＆＃13;

<form id="form">
  <input id="input" type="search" autofocus />
</form>
<button id="clear">clear</button>

＆＃13;

请参阅此CodePen以供参考。

表单提交后，Android键盘未隐藏

1 个答案: