提交按钮和输入关键问题答案

【问题标题】：Submit buttons and Enter key issues提交按钮和输入关键问题
【发布时间】：2011-12-29 19:29:10
【问题描述】：

如果用户关注任何提交按钮或输入类型文本（如在过滤数据网格中），我会尝试阻止表单提交。

我正在考虑 2 个选项

用某种<p onclick='submitform&parameters'>Add</p>替换提交按钮
阻止按钮和一些首选输入字段上的回车键

有没有更好的方法来做到这一点？

【问题讨论】：

为什么？人们期望回车键提交表单，尤其是当按钮获得焦点时。您是否将其他行为附加到按钮？
你说得有道理，但我想在某些页面上明确防止这种情况
正确的关键字组合显示了指向同一问题的不错链接:(stackoverflow.com/questions/1567644/…，如果有帮助会回复
它确实有帮助，问题已结束，感谢您分享您的意见 Patricia
您应该发布您的解决方案作为答案。即使只是那个问题就是答案。

标签： javascript html

【解决方案1】：

如果您向相关元素添加onKeyPress 事件，您可以通过从函数返回 false 来阻止默认操作（表单提交）：

<input id="txt" type="text" onKeyPress="var key = event.keyCode || event.which; if (key == 13) return false;"></input>

请注意，键盘事件的 which 属性已被弃用，但您仍需要检查它以支持较旧的用户代理和/或 Internet Exploder (reference)。

如果您不想使用内联 javascript（不推荐），您可以附加一个事件。此外，最好使用事件对象的preventDefault (docs) 方法以及stopPropagation 方法(docs) - 这些方法的必要性很大程度上取决于其他事件您已附加到表单或元素：

var preventFormSubmit = function (event) {
    var key = event.keyCode || event.which;
    if (key != 13)
        return;
    if (event.stopPropagation) event.stopPropagation();
    else event.cancelBubble = true; // deprecated, for older IE
    if (event.preventDefault) event.preventDefault();
    else event.returnValue = false; // deprecated, for older IE
    return false;
};  
var target = document.getElementById('txt');
if (typeof target.addEventListener == 'function')
    target.addEventListener('keypress', preventFormSubmit, false);
else if (typeof target.attachEvent == 'function')
    target.attachEvent('onkeypress', preventFormSubmit);

还有其他方法可以使用，例如将更复杂的 onSumit 处理程序附加到表单本身 - 如果您要在提交之前对表单或数据进行进一步操作（或使用AJAX 提交表单数据）。

【讨论】：

很好的解释，但是这个修复的范围只是针对IE7+，FF和Chrome，对于一个内网网站，这个修复是令人满意的，对于更高级的东西，我明白你的意思，谢谢你的分享你的想法

【解决方案2】：

解决方案

input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>

链接

http://stackoverflow.com/questions/1567644/submit-form-problem-enter-key

问题结束

【讨论】：