js監聽回車事件

時間 2019-11-29

標籤監聽回車事件欄目 JavaScript 简体版

原文原文鏈接

標題通俗的說，也就是綁定當用戶按下回車鍵要執行的事件。javascript

下面，入正題。html

第一步，先編寫簡單的頁面代碼，這裏咱們只須要一個按鈕就足夠了。固然，還有按鈕事件。 <html> java

<head>瀏覽器

<title>測試綁定enter</title> 函數

function b_onclick() { alert("你好！"); } 優化

</script> spa

</head> firefox

<body> htm

</html>

第二步，於b_onclick()函數加入以下js代碼：

function document.onkeydown()

{ //使用document.getElementById獲取到按鈕對象

var button = document.getElementById("test");

if(event.keyCode == 13)

{

button.click();

event.returnValue = false;

}

而後於IE中運行，你會發現，即便焦點不在按鈕上，當你按下回車，依然執行了按鈕的函數。稍微解釋一下代碼： event.keyCode == 13是判斷按下的是那一個間，13表明的是回車鍵。 button.click();執行按鈕事件。 event.returnValue = false;這個是爲了防止瀏覽器捕捉到用戶按下回車鍵而進行其餘操做。例如假如輸入框中，沒有這行代碼的話，在執行完按鈕事件後，其還會執行換行的動做。第三步，不少人都認爲作完上面的工做已經完成了整個做業。其實不是的。你嘗試使用firefox瀏覽，就會發現，代碼並不會執行。顯然，這是由於firefox不支持event事件對象。爲了作到跨瀏覽器，不得不將代碼進行優化。咱們能夠這個作：

首先，爲boby添加一個onkeydown監控函數，如<body onkeydown="BindEnter(event)">。其次修改原來的綁定函數爲：

function BindEnter(obj)

{ //使用document.getElementById獲取到按鈕對象

var button = document.getElementById('test');

if(obj.keyCode == 13)

{

button.click();

obj.returnValue = false;

}

} 爲何要將事件對象做爲參數傳遞呢？這是爲了不進行瀏覽器判別，節省代碼。 OK，到這裏已經基本完成了。完整代碼以下：

<html>

<head>