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

【问题标题】：How can I load a new page with enter key?如何使用回车键加载新页面？
【发布时间】：2012-10-17 10:41:21
【问题描述】：

<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 有关。

【问题讨论】：

如果你不介意放弃对IE的支持，你也可以将[input#searchinput].onchange绑定到handleButtonClick()；如果您不喜欢这样，请听[input#searchinput].onkeyup 并检查是否按下了[Enter] (keyCode: 13)。
好的，我已经添加了答案。

标签： javascript button key enter

【解决方案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();
    };
}

【讨论】：

@Imrahil 在“IE-unfriendly”版本中，我告诉[input#searchinput] 处理onchange 事件，就像点击[button#searchbuton] 一样；在普通版本中，我告诉[input#searchinput]去监听onkeyup事件，看看[Enter](keyCode=13)是否被按下，如果是，运行handleButtonClick()。
@Imrahil 好吧，它与 IE 兼容。 IE 不会发送event 作为第一个参数；相反，您必须在事件处理程序中使用window.event。如果你只是在做 Opera 扩展，你可以省略那行。
是的，我正在做 Opera 扩展，但如果您能提供更多详细信息（或任何文章链接），我将不胜感激。
@Imrahil “更多细节”是什么意思？我对 Opera 扩展一无所知，但如果你在谈论 event 的东西，here 是来自 MSDN 的文档，here 是来自 Mozilla 的文档。
我说的是事件的事情。感谢您的链接。

【解决方案2】：

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

雨果，

【讨论】：

我会将它用于 Opera 扩展。这将是这样的； urbandictionary.com/define.php?term= 将是主 url，用户的输入将转到 url 的末尾。您对此有什么建议吗？
Imrahil，我更正了我的答案，并附上了一个 JSFiddle，您可以在其中实时测试代码。我用 UrbanDictionary 制作了这个版本，因为我不知道谷歌的命令行，但它是一样的，只是一个小改动。
我认为这比其他表单更好（捕获 onClick 和 keycode 13 事件），因为您依赖浏览器知道何时提交表单。无论使用何种方式提交表单，JS 代码都会运行。其他方法尝试模拟 onSubmit() 事件。

【解决方案3】：

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

【讨论】：

我不想使用内联脚本，如何在脚本标签中使用？