提交表單后未隱藏Android鍵盤

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> 

請參閱此CodePen以供參考。