我如何讓 javascript 函數在回車鍵上運行，而不是點擊？

Question

當我單擊此按鈕時，它會運行該功能並且一切正常。

<input id="input_listName" /><button id="btn_createList">add</button>

當我點擊它時，它會運行：

$('#btn_createList').click(function(){
    $('.ul_current').append($('<li>', {
         text: $('#input_listName').val()
    }));
});

當我按下它時，它會將輸入中的值附加到<li>元素。

如何重做此操作，而不是單擊時運行函數，而是單擊“輸入鍵”時運行該函數？

我想一起隱藏提交鍵。 請注意，輸入和提交周圍沒有表單標簽，因為這是一個 API 應用程序，我只是嘗試過濾而不是真正提交任何內容。

Answer 1

別。

你有一個表格。 如此對待它。

 document.getElementById('input_listName').addEventListener('submit', function(e) { e.preventDefault(); const li = document.createElement('li'); li.append(this.listName.value); document.querySelector(".ul_current").append(li); // optionally: // this.listName.value = "" }, false);

 <form id="input_listName"> <input type="text" name="listName" /> <button type="submit">add</button> </form> <ul class="ul_current"></ul>

將其設為表單可提供瀏覽器為您提供的所有好處。 在桌面上，您可以按 Enter 提交。 在移動設備上，虛擬鍵盤還可以提供快速訪問提交按鈕。 您甚至可以向<input />元素添加required驗證規則，瀏覽器將為您處理所有這些。

Answer 2

在event的幫助event ，您可以捕捉按下的enter (keycode = 13) 鍵，如我的示例所示。

有必要嗎？

$('#btn_createList').keypress(function(event){
   if (event.keyCode == 13) {
    $('.ul_current').append($('<li>', {
         text: $('#input_listName').val()
    }));
    }
});

Answer 3

我想你想要的是檢查按下了哪個鍵，對嗎？

為此，您只需檢查 event.keyCode === 13

因此，您的代碼將類似於以下內容：

$('#btn_createList').keypress(function(event){
    if (event.keyCode === 13) {
         $('.ul_current').append($('<li>', {
             text: $('#input_listName').val()
         }));
    }    
});

希望這能解決問題！

Answer 4

<input id="input_listName" /><button id="btn_createList">add</button>這種語法在技術上是錯誤的，您的標簽以<input>開頭並以</button>結尾。 您還可以向您的函數添加一個簡單的檢查，如果用戶尚未在輸入字段中輸入任何內容，則不應返回任何內容。

您還可以查看此備忘單以了解有關密鑰代碼的更多信息https://css-tricks.com/snippets/javascript/javascript-keycodes/

 $('#btn_createList').keypress(function(event){ if($('#input_listName').val()) { if (event.keyCode == 13) { $('.ul_current').append($('<li>', { text: $('#input_listName').val() })); } } });

 <div id="btn_createList"> <input id="input_listName" type="text"> <ul class="ul_current"> </ul> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>