首页 文章

表单提交后Android键盘未隐藏

提问于
浏览 次
0

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

  • 当您输入内容并按下移动键盘上的"Go/Search"按钮时，应隐藏键盘 .

  • 当您单击"Clear"按钮时，应清除输入但键盘保持打开状态 .

有趣的是它可以工作t otally opposite ：键盘将在提交表单后打开，并在清理输入后消失 .

有没有办法让它“正确”？

代码，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

javascript html mobile

1 回答

  • 1

    我知道你怎么能看到它，但这是一个问题，默认情况下某些事件在JS中是如何工作的 .

    当你点击“清除”按钮时，你正在做的是从输入中聚焦，这反过来又是键盘消失的原因 . 由于您不再输入输入，键盘就会消失 .

    但是，当您单击“转到/继续/提交”按钮时，焦点将保留在输入上，直到相应的表单操作触发为止 .

    我要么：

    • 强制将焦点输出事件放在提交的输入上，并在点击"clear"之后关注输入，就像你现在一样;要么

    • 添加提交按钮以触发表单提交事件 . 这将删除输入的焦点并将其放在提交按钮上 .

    以下是选项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以供参考 .

    回复于

相关问题