仅在 _some 字段上通过 Enter 键禁用表单提交
Posted
技术标签:
【中文标题】仅在 _some 字段上通过 Enter 键禁用表单提交【英文标题】：Disable form submission via Enter key on only _some fields 【发布时间】：2011-02-17 03:38:15 【问题描述】：我想保留传统的“按 Enter 时提交表单”行为，因为用户很熟悉。但是通过反射，当他们完成一个文本输入框时，他们经常按回车 - 但在他们真正完成完整表单之前。
我只想在焦点集中在某类输入时才劫持 Enter 键。
寻找Related Questions 这看起来像我要找的东西：
if (document.addEventListener)
document.getElementById('strip').addEventListener('keypress',HandleKeyPress,false);
else
document.getElementById('strip').onkeypress = HandleKeyPress;
但if (document.addEventListener) 部分我不熟悉。
【问题讨论】：
这就是所谓的特征检测。如果浏览器使用addEventListener() 语法来添加事件监听器，那么在每个DOM 节点对象（特别是在文档对象中）都会有一个名为addEventListener 的函数对象。函数对象在转换为布尔值时变为真，因此第一个分支运行。如果浏览器不理解 addEventListener 语法，document.addEventListener 将未定义（转换为 false）并执行第二个分支中的回退代码。
非常感谢解释。谢谢！
【参考方案1】：
您可以捕获并取消在这些字段中输入keypress，如下所示：
$('.noEnterSubmit').keypress(function(e)
if ( e.which == 13 ) return false;
//or...
if ( e.which == 13 ) e.preventDefault();
);
然后在您的输入中给他们一个class="noEnterSubmit" :)
展望未来，以防其他人稍后发现，在 jQuery 1.4.3（尚未发布）中，您可以将其缩短为：
$('.noEnterSubmit').bind('keypress', false);
【讨论】：
您还需要记住bind('keypress', false); 将禁止所有数据输入。因此，如果您想将此应用于文本输入元素，请使用第一个解决方案
如果你使用动态字段，你应该把它改成$('body').on('keypress', '.noEnterSubmit', function() ... );
使用类不适合语义控制。最好使用 data-nosubmit 或类似的 html 5 数据属性。 $('[data-nosubmit]') 是选择器，那么。
@JoergKrause 这完全是主观的 - 我们使用 js-className 并且它工作得很好，这取决于开发人员。类名在旧版浏览器中也可以工作（并且工作速度很快 - 本机选择器引擎）并且是 html4 有效的（不是数据属性实际上会破坏 html4）。【参考方案2】：
只允许输入特定类（在本例中为“enterSubmit”）：
jQuery(document).ready(function()
jQuery('input').keypress(function(event)
var enterOkClass = jQuery(this).attr('class');
if (event.which == 13 && enterOkClass != 'enterSubmit')
event.preventDefault();
return false;
);
);
【讨论】：
【参考方案3】：只需在您的 HTML 代码中的 <Head> 标签中添加以下代码。
它将在表单上的所有字段的输入键上提交表单
<script type="text/javascript">
function stopEnterKey(evt)
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type == "text")) return false;
document.onkeypress = stopEnterKey;
</script>
【讨论】：
【参考方案4】： <input type="text" onkeydown="return (event.keyCode!=13);" />
【讨论】：
哇！这个对我有用。我在UpdatePanel 中使用asp:TextBox 和AutoPostback="True"。我需要禁用回车键上的回发，因为AutoPostback 和 Enter 键都触发了TextChanged 事件。所以简而言之，我需要一种方法来仅在一个按钮上停止输入键，而不覆盖回发。这非常有效！ +1
完美的清洁方式！但是它给了我警告“使用了已弃用的符号，请查阅文档以获得更好的选择”以上是关于仅在 _some 字段上通过 Enter 键禁用表单提交的主要内容，如果未能解决你的问题，请参考以下文章
如何禁用转到下一个字段并在 Android 上的 keyCode == “enter” (13) 上提交表单