trigger - keypress javascript




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

使用現代JS的keypressevent.key

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

Mozilla文檔

支持的瀏覽器

我有一個文本輸入和一個按鈕(見下文)。 在文本框內按下Enter鍵時,如何使用JavaScript 觸發按鈕的單擊事件

在我的當前頁面上已經有了一個不同的提交按鈕,所以我不能簡單地將按鈕設為提交按鈕。 而且,我希望Enter鍵在這個文本框內按下這個特定的按鈕,沒有別的。

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

嘗試一下:

<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>

使按鈕成為一個提交元素,所以它會自動。

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

請注意,您需要一個包含輸入字段的<form>元素才能完成此工作(感謝Sergey Ilinsky)。

重新定義標準行為不是一個好習慣, 回車鍵應該總是調用表單上的提交按鈕。


儘管我很確定只要表單中只有一個字段和一個提交按鈕,即使頁面上有另一個表單,按回車鍵也應該提交表單。

然後,您可以使用js捕獲表單並提交您想要的任何驗證或回調。


在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>


在普通的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給出一些東西。


對於jquery移動我不得不這樣做

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

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

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

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


沒有人注意到自一段時間以來可用的html attibute“accesskey”。

這是一種沒有JavaScript鍵盤快捷鍵的東西。

MDN上的accesskey屬性快捷方式

喜歡用這樣的。 html屬性本身就夠了,我們可以根據瀏覽器和操作系統改變佔位符或其他指標。 該腳本是一個未經測試的臨時方法來提供一個想法。 您可能需要使用瀏覽器庫檢測器,如小型瀏覽器

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", "Access keys: ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "Access keys: ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "Access keys: CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "Shortcut: SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}
<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>


然後只需編寫代碼!

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

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

由於沒有人使用過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以允許此代碼(可能)在表單中工作。 (我會考慮測試這個,在這一點上,我會刪除括號內容。)


要在每次按下回車鍵時觸發搜索,請使用以下命令:

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

這也可能有幫助,一個小的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)" />

我知道這個問題已經解決,但我只是找到了一些可以幫助他人的東西。


這個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();" />

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做這個。 我嘗試了幾個建議,但遇到了問題。 這工作得很好。


event.returnValue = false

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

它至少在Internet Explorer和Opera中起作用。





onkeypress