在文本框中的 Enter 鍵上使用 JavaScript 觸發按鈕單擊

Question

我有一個文本輸入和一個按鈕（見下文）。 當在文本框中按下Enter鍵時，如何使用 JavaScript觸發按鈕的單擊事件？

我的當前頁面上已經有一個不同的提交按鈕，所以我不能簡單地將按鈕設置為提交按鈕。 而且，我只希望在這個文本框中按下Enter鍵來單擊此特定按鈕，僅此而已。

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Answer 1

在 jQuery 中，以下將起作用：

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

 $("#pw").keyup(function(event) { if (event.keyCode === 13) { $("#myButton").click(); } }); $("#myButton").click(function() { alert("Button code executed."); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Username:<input id="username" type="text"><br> Password:&nbsp;<input id="pw" type="password"><br> <button id="myButton">Submit</button>

或者在純 JavaScript 中，以下內容會起作用：

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

 document.getElementById("pw") .addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { document.getElementById("myButton").click(); } }); function buttonCode() { alert("Button code executed."); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Username:<input id="username" type="text"><br> Password:&nbsp;<input id="pw" type="password"><br> <button id="myButton" onclick="buttonCode()">Submit</button>

Answer 2

然后只需將其編碼！

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>

Answer 3

想通了：

<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />

<script>
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
</script>

Answer 4

使按鈕成為提交元素，因此它將是自動的。

<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>

請注意，您需要一個包含輸入字段的<form>元素才能完成這項工作（感謝 Sergey Ilinsky）。

重新定義標准行為不是一個好習慣， Enter鍵應始終調用表單上的提交按鈕。

Answer 5

由於還沒有人使用過addEventListener ，這是我的版本。 給定元素：

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

我會使用以下內容：

var go = document.getElementById("go");
var txt = document.getElementById("txt");

txt.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.keyCode == 13)
        go.click();
});

這允許您在保持 HTML 干凈的同時單獨更改事件類型和操作。

請注意，確保它在<form>之外可能是值得的，因為當我將這些元素包含在其中時，按 Enter 提交了表單並重新加載了頁面。 我眨了幾眼才發現。

附錄：感謝@ruffin 的評論，我添加了缺少的事件處理程序和preventDefault以允許此代碼（可能）也可以在表單中工作。 （我將開始對此進行測試，此時我將刪除括號中的內容。）

Answer 6

在純 JavaScript 中，

if (document.layers) {
  document.captureEvents(Event.KEYDOWN);
}

document.onkeydown = function (evt) {
  var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
  if (keyCode == 13) {
    // For Enter.
    // Your function here.
  }
  if (keyCode == 27) {
    // For Escape.
    // Your function here.
  } else {
    return true;
  }
};

我注意到回復只在 jQuery 中給出，所以我也想用純 JavaScript 給出一些東西。

Answer 7

您可以為此使用的一個基本技巧，我還沒有看到完全提到。 如果您想執行 ajax 操作，或在 Enter 上進行其他一些工作，但不想實際提交表單，您可以這樣做：

<form onsubmit="Search();" action="javascript:void(0);">
    <input type="text" id="searchCriteria" placeholder="Search Criteria"/>
    <input type="button" onclick="Search();" value="Search" id="searchBtn"/>
</form>

設置 action="javascript:void(0);" 像這樣是本質上防止默認行為的捷徑。 在這種情況下，無論您是按 Enter 還是單擊按鈕，都會調用一個方法，然后調用 ajax 來加載一些數據。

Answer 8

在現代 JS 中使用keypress和event.key === "Enter" ！

const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        document.getElementById("btnSearch").click();
    }
});

Mozilla 文檔

支持的瀏覽器

Answer 9

要在每次按下 enter 鍵時觸發搜索，請使用以下命令：

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}

Answer 10

試試看：

<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>

<script>             
   window.onload = function() {
     document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
        if (event.keyCode == 13) {
            document.getElementById('btnSearch').click();
        }
    };

    document.getElementById('btnSearch').onclick =doSomething;
}
</script>

Answer 11

onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

這只是我從最近的一個項目中得到的東西......我在網上找到了它，我不知道在普通的舊 JavaScript 中是否有更好的方法。

Answer 12

雖然，我很確定只要表單中只有一個字段和一個提交按鈕，即使頁面上有另一個表單，按 Enter 鍵也應該提交表單。

然后，您可以使用 js 捕獲表單 onsubmit 並執行您想要的任何驗證或回調。

Answer 13

這是所有YUI愛好者的解決方案：

Y.on('keydown', function() {
  if(event.keyCode == 13){
    Y.one("#id_of_button").simulate("click");
  }
}, '#id_of_textbox');

在這種特殊情況下，我使用 YUI 觸發已注入按鈕功能的 DOM 對象確實有更好的結果——但這是另一回事了……

Answer 14

在Angular2 中：

(keyup.enter)="doSomething()"

如果您不希望按鈕中有一些視覺反饋，那么不引用按鈕而是直接調用控制器是一個很好的設計。

此外，不需要 id - 另一種分離視圖和模型的 NG2 方式。

Answer 15

在現代，不推薦使用（沒有keyCode或onkeydown ）Javascript：

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">

Answer 16

沒有人注意到有一段時間可用的 html 屬性“accesskey”。

這是一種沒有 javascript 的鍵盤快捷鍵方式。

MDN 上的 accesskey 屬性快捷方式

打算這樣使用。 html 屬性本身就足夠了，但是我們可以根據瀏覽器和操作系統更改占位符或其他指示符。 該腳本是一種未經測試的從頭開始提供想法的方法。 您可能想要使用瀏覽器庫檢測器，例如小Bowser

 let client = navigator.userAgent.toLowerCase(), isLinux = client.indexOf("linux") > -1, isWin = client.indexOf("windows") > -1, isMac = client.indexOf("apple") > -1, isFirefox = client.indexOf("firefox") > -1, isWebkit = client.indexOf("webkit") > -1, isOpera = client.indexOf("opera") > -1, input = document.getElementById('guestInput'); if(isFirefox) { input.setAttribute("placeholder", "ALT+SHIFT+Z"); } else if (isWin) { input.setAttribute("placeholder", "ALT+Z"); } else if (isMac) { input.setAttribute("placeholder", "CTRL+ALT+Z"); } else if (isOpera) { input.setAttribute("placeholder", "SHIFT+ESCAPE->Z"); } else {'Point me to operate...'}

 <input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>

Answer 17

如果您還想禁用 Posting to server 中的 enter 按鈕並執行 Js 腳本。

<input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13)
 {document.getElementById('btnSearch').click(); return false;}"/>
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Answer 18

這個onchange嘗試很接近，但是對於瀏覽器的行為不正常（在 Safari 4.0.5 和 Firefox 3.6.3 上），所以最終，我不會推薦它。

<input type="text" id="txtSearch" onchange="doSomething();" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Answer 19

短工作純 JS

txtSearch.onkeydown= e => (e.key=="Enter") ? btnSearch.click() : 1

 txtSearch.onkeydown= e => (e.key=="Enter") ? btnSearch.click() : 1 function doSomething() { console.log('💩'); }

 <input type="text" id="txtSearch" /> <input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Answer 20

對於 jQuery mobile，我必須這樣做：

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

Answer 21

event.returnValue = false

在處理事件時或在事件處理程序調用的函數中使用它。

它至少可以在 Internet Explorer 和 Opera 中運行。

Answer 22

要添加一個完全簡單的 JavaScript 解決方案來解決@icedwater 的表單提交問題，這里有一個完整的form解決方案。

注意：這適用於“現代瀏覽器”，包括 IE9+。 IE8 版本並沒有那么復雜，可以在這里學習。

---

小提琴： https ://jsfiddle.net/rufwork/gm6h25th/1/

HTML

<body>
    <form>
        <input type="text" id="txt" />
        <input type="button" id="go" value="Click Me!" />
        <div id="outige"></div>
    </form>
</body>

JavaScript

// The document.addEventListener replicates $(document).ready() for
// modern browsers (including IE9+), and is slightly more robust than `onload`.
// More here: https://stackoverflow.com/a/21814964/1028230
document.addEventListener("DOMContentLoaded", function() {
    var go = document.getElementById("go"),
        txt = document.getElementById("txt"),
        outige = document.getElementById("outige");

    // Note that jQuery handles "empty" selections "for free".
    // Since we're plain JavaScripting it, we need to make sure this DOM exists first.
    if (txt && go)    {
        txt.addEventListener("keypress", function (e) {
            if (event.keyCode === 13)   {
                go.click();
                e.preventDefault(); // <<< Most important missing piece from icedwater
            }
        });

        go.addEventListener("click", function () {
            if (outige) {
                outige.innerHTML += "Clicked!<br />";
            }
        });
    }
});

Answer 23

對於那些可能喜歡簡潔和現代 js 方法的人。

input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});

其中input是包含您的輸入元素的變量。

Answer 24

document.onkeypress = function (e) {
 e = e || window.event;
 var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
 if (charCode == 13) {

        // Do something here
        printResult();
    }
};

這是我的兩分錢。 我正在開發適用於 Windows 8 的應用程序，並希望按鈕在按下 Enter 按鈕時注冊一個單擊事件。 我在 JS 中這樣做。 我嘗試了一些建議，但遇到了問題。 這工作得很好。

Answer 25

用 jQuery 做到這一點：

$("#txtSearch").on("keyup", function (event) {
    if (event.keyCode==13) {
        $("#btnSearch").get(0).click();
    }
});

用普通的 JavaScript 來做到這一點：

document.getElementById("txtSearch").addEventListener("keyup", function (event) {
    if (event.keyCode==13) { 
        document.getElementById("#btnSearch").click();
    }
});

Answer 26

我有一個文本輸入和一個按鈕（請參閱下文）。 當在文本框中按下Enter鍵時，如何使用JavaScript觸發按鈕的click事件？

當前頁面上已經有一個不同的“提交”按鈕，因此我不能簡單地將該按鈕設為“提交”按鈕。 而且，如果只從一個文本框中按下該按鈕，我只希望按Enter鍵即可單擊此特定按鈕，而沒有其他選擇。

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Answer 27

在 jQuery 中，您可以使用event.which==13 。 如果您有form ，則可以使用$('#formid').submit() （將正確的事件偵聽器添加到所述表單的提交中）。

 $('#textfield').keyup(function(event){ if(event.which==13){ $('#submit').click(); } }); $('#submit').click(function(e){ if($('#textfield').val().trim().length){ alert("Submitted!"); } else { alert("Field can not be empty!"); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label for="textfield"> Enter Text:</label> <input id="textfield" type="text"> <button id="submit"> Submit </button>

Answer 28

如今， change事件就是這樣！

document.getElementById("txtSearch").addEventListener('change',
    () => document.getElementById("btnSearch").click()
);

Answer 29

我已經開發了自定義 javascript 來通過添加類來實現這個功能

示例： <button type="button" class="ctrl-p">Custom Print</button>

在這里檢查一下小提琴
- 或者 -
查看運行示例https://stackoverflow.com/a/58010042/6631280

注意：在當前邏輯上，您需要按Ctrl + Enter

Answer 30

我有一個文本輸入和一個按鈕（請參閱下文）。 當在文本框中按下Enter鍵時，如何使用JavaScript觸發按鈕的click事件？

當前頁面上已經有一個不同的“提交”按鈕，因此我不能簡單地將該按鈕設為“提交”按鈕。 而且，如果只從一個文本框中按下該按鈕，我只希望按Enter鍵即可單擊此特定按鈕，而沒有其他選擇。

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Answer 31

我的可重復使用的 Vanilla JS 解決方案。 因此，您可以根據活動的元素/文本框更改哪個按鈕被點擊。

 <input type="text" id="message" onkeypress="enterKeyHandler(event,'sendmessage')" />
 <input type="button" id="sendmessage" value="Send"/>

---

function enterKeyHandler(e,button) {
    e = e || window.event;
    if (e.key == 'Enter') {
        document.getElementById(button).click();
    }
}

Answer 32

您可以在 jQuery 中嘗試以下代碼。

$("#txtSearch").keyup(function(e) {
    e.preventDefault();
    var keycode = (e.keyCode ? e.keyCode : e.which);
    if (keycode === 13 || e.key === 'Enter') 
    {
        $("#btnSearch").click();
    }
});

Answer 33

這也可能有幫助，一個小的 JavaScript 函數，它工作正常：

<script type="text/javascript">
function blank(a) { if(a.value == a.defaultValue) a.value = ""; }

function unblank(a) { if(a.value == "") a.value = a.defaultValue; }
</script> 
<input type="text" value="email goes here" onfocus="blank(this)" onblur="unblank(this)" />

我知道這個問題已經解決了，但我剛剛發現了一些對其他人有幫助的東西。