如何使用 JavaScript 的文字方塊中的 Enter 鍵觸發按鈕按一下？

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

JavaScript 提供了一種方便的解決方案，可以在特定文字方塊中按Enter鍵時觸發按鈕點選事件。讓我們深入研究解決方案：

jQuery 實作：

在jQuery 框架內，以下程式碼片段實現了所需的行為：

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

其工作原理如下：

1. $("#id_of_textbox") 選擇器以指定 ID 的文字方塊為目標。
2. keyup 事件偵聽器監視何時在文字方塊中釋放 Enter 鍵。
3. 在事件處理程序內， event.keyCode 屬性檢查按下的按鍵的代碼是否與 Enter 鍵的代碼 (13) 相符。
4. 如果按下了 Enter 鍵，則$("#id_of_button").click() 語句模擬指定按鈕上的點選事件。

原生JavaScript 實作：

對於純JavaScript，可以使用以下程式碼：

const textbox = document.getElementById("id_of_textbox");
const button = document.getElementById("id_of_button");

textbox.addEventListener("keypress", (event) => {
    if (event.key === "Enter") {
        button.click();
    }
});

這個code:

1. 使用其ID 引用文字方塊和按鈕元素。
2. 將按鍵事件監聽器附加到文字方塊。
3. 在事件處理程序中，它檢查按下的鍵是否為 Enter 鍵。
4. 如果按下 Enter 鍵，button.click() 方法會模擬點選按鈕。

實作注意事項：

1. 指定ID： 確保文字方塊和按鈕元素具有程式碼正確工作的唯一ID 。
2. 避免表單提交：如果使用回車鍵提交表單，可能會與按鈕的點擊事件衝突。為了防止這種情況，請盡可能避免使用 Enter 鍵進行表單提交。
3. 相容性：按鍵解決方案被認為比 keyup 更現代，但對於舊版瀏覽器可能需要 keyup。

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