不知道大家有沒有遇過,假設你的一個頁面上有不只一個 input,那麼你在 android 裝置上的 chrome 輸入好內容後,直接按下軟鍵盤的 enter(回車鍵),他竟然就自己跳到下一個 input 並且 focus 在那裡…

enter回車鍵是哪顆按鈕

回車鍵就是你點input時候跳出的軟鍵盤的enter鍵。

其實回車鍵這個名詞好像是對岸的用語,台灣好像都統稱叫Enter鍵,但我覺得回車鍵不包含「換行」的感覺,比較像是送出的感覺。

android enter回車鍵

今天我希望他點擊之後可以直接搜尋打api,不要再跳下一個input(因為下一個input根本不是這個表單的

我嘗試了例如在input監聽 onKeyDownonKeyUp,都捕捉不到那個按鍵。

捕捉不到的意思就是他會直接跳下一個input,然後不會執行我的搜尋function

const handleSearch = (e) => {
  e.preventDefault();
  fetch('/api/search') //...
}

//...
<input onKeyDown={handleSearch} />

外面加一層form來區分兩個input

後來睡前想到了一個方式,就是外面加一層form來區分兩個input

const handleSearch = (e) => {
  e.preventDefault();
  fetch('/api/search') //...
}

//...
<form onSubmit={handleSearch}>
  <input />
</form>

然後就成功了~果然還是要睡前靈感大爆發才是最好的加班時刻。

0
0 回復

發表評論

想要加入討論嗎?
請盡情發表您的想法!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。