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/

雨果，

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

3 个答案: