javascript - 如何使用回车键加载新页面？

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

从评论扩展：

一个对 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();
    };
}

Answer 2

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

Answer 3

我认为您应该使用带有提交按钮的标签，并使用表单的 .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/

雨果，