如何使用回車鍵加載新頁面？

Question

<script type="text/javascript"> 
window.onload = init; 

function init() { 
    var button = document.getElementById("searchbutton"); 
    button.onclick = handleButtonClick; 
} 

function handleButtonClick(e) { 
    var textinput = document.getElementById("searchinput"); 
    var searchterm = textinput.value; 
    window.location.assign("http://www.google.com/testing/" + searchterm) 
} 
</script> 

<input type="text" name="search" id="searchinput"> 
<button type="button" id="searchbutton">Ara</button> 

該代碼塊接受用戶輸入並隨之進入一個新頁面。

當用戶按下回車鍵時，我想用該提交按鈕做同樣的事情。我在網上找到了一些東西，但它們都與jquery有關。

Answer 1

我想你應該使用一個標籤，提交按鈕，並使用窗體的.onSubmit（）事件。這個事件將在你點擊和當你點擊Return（Enter）鍵時觸發。

一個例子JS代碼（的jsfiddle測試，只是修改了一下你的代碼中添加一種形式）：

<script type="text/javascript"> 
function processForm(e) { 
    if (e.preventDefault) e.preventDefault(); 

    var textinput = document.getElementById("searchinput"); 
    var searchterm = textinput.value; 
    window.location.assign("http://www.urbandictionary.com/define.php?term=" + searchterm) 

    return false; // Block form 
} 

var form = document.getElementById('searchForm'); 

if (form.attachEvent) { form.attachEvent("submit", processForm); } 
else { form.addEventListener("submit", processForm); }​ 
</script> 
<form id="searchForm"> 
<input type="text" name="search" id="searchinput"> 
<input type="submit"> 
</form>​ 

你可以看這個代碼住在這裏：http://jsfiddle.net/UD8FN/

雨果，

Answer 2

<input type="text" name="search" id="searchinput" onkeydown="if (event.keyCode == 13) handleButtonClick()"> 

Answer 3

從評論延伸：

對IE不友好的解決方案：

function init() { 
    var button = document.getElementById("searchbutton"); 
    button.onclick = handleButtonClick; 
    document.getElementById("searchinput").onchange=handleButtonClick; 
} 

常見的解決方案：

function init() { 
    var button = document.getElementById("searchbutton"); 
    button.onclick = handleButtonClick; 
    document.getElementById("searchinput").onkeyup=function(e){ 
     e=e?e:event; 
     if(e.keyCode==13) handleButtonClick(); 
    }; 
}