Question

我有一个HTML input文字字段。

如何在编辑该字段时点击“Enter”按钮时执行特定的JavaScript调用？目前，点击“Enter”会重新加载整个页面，可能是因为提交了整个表单。

注意：此HTML / JS代码仅作为portlet包含在门户网站的大型HTML页面中，其中有一个大型主表单包裹在我的代码中。因此我无法控制表单 - 无法更改onSubmit事件或操作或将我的INPUT字段换成更小的表单 - 否则解决方案将是显而易见的：）

此外，不需要在表单中添加可见按钮的解决方案强烈（我不介意添加display:hidden按钮如果这就是它需要的东西，但我这样做的尝试似乎并不奏效。

这需要直接JS - 没有Query / Prototype / YUI可用。

P.S。它是一个搜索字段，如果有人好奇，该操作将调用现有的页内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 个答案: