编辑文本输入时，如何在不使用表单的onSubmit处理程序的情况下按“ Enter”键执行特定的JavaScript操作？

Question

我有一个HTML input文本字段。

在编辑该字段时点击“ Enter”按钮，如何执行特定的JavaScript调用？ 当前，单击“ Enter”将重新加载整个页面，大概是由于提交了整个表单。

注意：此HTML / JS代码仅作为Portlet包含在门户网站的大型HTML页面中，该门户网站具有一个大的主窗体，始终围绕着我的代码。 因此， 我无法控制表单-无法更改onSubmit事件或操作，也无法将我的INPUT字段包装为较小的表单 -否则解决方案将很明显:)

此外，不涉及添加一个可见的按钮形式的解决方案是最好强（我不介意加入一个按钮display:hidden ，如果这是什么需要，但我试图这样做似乎没有工作）。

这需要直接使用JS-没有查询/原型/ YUI。

PS：这是一个搜索字段，如果有人好奇的话，该操作将是对现有页内JavaScript搜索方法的调用。

谢谢！

Answer 1

包括以下javascript

<script type="text/javascript">
function noenter() {
    return !(window.event && window.event.keyCode == 13); 
}
</script>

将以下属性添加到您希望阻止提交的输入元素中

onkeypress="return noenter()"

当然，如果您愿意，您还可以执行其他一些活动...

Answer 2

假设您有一个文本输入类似

<input id="myTextBox" name="foo" value="bar">

...您可以在文档加载后执行类似的操作，它可以在所有主流浏览器中使用：

document.getElementById("myTextBox").onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    if (charCode == 13) {
        // Suppress default action of the keypress
        if (evt.preventDefault) {
            evt.preventDefault();
        }
        evt.returnValue = false;

        // Do stuff here
    }
};

Answer 3

使用文档对象检测Enter操作会更好吗？ 这样，您无需更改HTML表单标签。 您可以将搜索功能分配给按钮，尽管如果隐藏了该按钮，我不确定用户如何单击它，或者可以使用onblur之类的方法来捕获用户在输入控件中的切换。

Answer 4

尝试添加属性“ action = javascript：void（0）”，如下例所示。

Enter将触发与单击“提交”按钮相同的操作，但不会自动重新加载页面。

<html>
<head></head>
<body>
    <div id="status"></div>
    <form action="javascript:void(0)">
        <input type="text" />
        <input type="submit" value="submit" onclick="document.getElementById('status').innerHTML = 'submitted';"/>
    </form>
    <script>document.getElementById('status').innerHTML = 'page loaded';</script>
</body>
</html>

编辑文本输入时，如何在不使用表单的onSubmit处理程序的情况下按“ Enter”键执行特定的JavaScript操作？

问题描述

4 个解决方案

解决方案1
2 2009-10-27 19:48:51

解决方案2
2 已采纳 2009-10-27 23:50:30

解决方案3
-1 2009-10-27 19:58:46

解决方案4
-1 2009-10-27 21:22:47

编辑文本输入时，如何在不使用表单的onSubmit处理程序的情况下按“ Enter”键执行特定的JavaScript操作？

问题描述

4 个解决方案

解决方案1 2 2009-10-27 19:48:51

解决方案2 2 已采纳 2009-10-27 23:50:30

解决方案3 -1 2009-10-27 19:58:46

解决方案4 -1 2009-10-27 21:22:47

解决方案1
2 2009-10-27 19:48:51

解决方案2
2 已采纳 2009-10-27 23:50:30

解决方案3
-1 2009-10-27 19:58:46

解决方案4
-1 2009-10-27 21:22:47