首頁 >web前端 >js教程 >當在文字方塊中按下 Enter 鍵時,如何使用 JavaScript 觸發按鈕按一下?

當在文字方塊中按下 Enter 鍵時,如何使用 JavaScript 觸發按鈕按一下?

Patricia Arquette
Patricia Arquette原創
2024-12-09 12:56:14280瀏覽

How Can I Trigger a Button Click with JavaScript When the Enter Key is Pressed in a Text Box?

使用JavaScript 在文字方塊Enter 鍵上觸發按鈕點擊

在Web 開發中,通常需要在表單元素上觸發操作,例如按鈕,當特定事件發生時。常見的情況是在文字輸入欄位中按下 Enter 鍵時觸發按鈕點擊。以下是如何使用JavaScript 實現此目的:

使用jQuery

jQuery,一個流行的JavaScript 庫,為這個問題提供了一個簡單的解決方案:

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});

此程式碼將keyup 事件偵聽器附加到ID為「id_of_textbox」的文字輸入欄位。當在此輸入中按下 Enter 鍵(keyCode 13)時,它會觸發 ID 為「id_of_button」的按鈕上的點擊事件。

自訂JavaScript

如果您不想使用函式庫,則可以使用純JavaScript 實作此功能:

document.getElementById("id_of_textbox").addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

此程式碼執行相同的任務與jQuery 範例相同,但它使用本機addEventListener() 方法將keyup 偵聽器附加到文字輸入。

範例用法

考慮以下HTML 標記:

<input type="text">

要觸發「bSearch鍵時按輸入,您將使用提供的程式碼片段之一,並相應地替換元素ID。

以上是當在文字方塊中按下 Enter 鍵時,如何使用 JavaScript 觸發按鈕按一下?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn