禁用表单的输入密钥

Question

我一直在尝试禁用Enter表单上的密钥.我的代码如下所示.由于某种原因,回车键仍然触发提交.代码在我的脑子部分,似乎从其他来源是正确的.

disableEnterKey: function disableEnterKey(e){
        var key;      
        if(window.event)
            key = window.event.keyCode; //IE
        else
            key = e.which; //firefox      

        return (key != 13);
    },

Answer 1

如果你使用jQuery,它很简单.干得好

$(document).keypress(
  function(event){
    if (event.which == '13') {
      event.preventDefault();
    }
});

Answer 2

大多数答案都在jquery中.您可以在纯Javascript中完美地完成此操作,简单且无需库.这里是:

<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true);
</script>

这段代码效果很好,因为它只会禁用输入type ='text'的"Enter"按键操作.这意味着访问者仍然可以在textarea和所有网页中使用"Enter"键.他们仍然可以通过"提交"按钮和"Tab"键并点击"Enter"来提交表格.

以下是一些亮点:

1. 它是纯粹的javascript(不需要库).
2. 它不仅检查按下的键,还确认是否在输入type ='text'表单元素上点击了"Enter".(这导致最错误的形式提交
3. 与上述一起,用户可以在任何其他地方使用"Enter"键.
4. 它简短,干净,快速,直接.

如果你想为其他动作禁用"Enter",你可以添加console.log(e); 为了您的测试目的,并在Chrome中点击F12,转到"控制台"选项卡并点击页面上的"退格"并查看其中的内容以查看返回的值,然后您可以定位所有这些参数以进一步增强代码以上是为了满足你对"e.target.nodeName","e.target.type"以及更多......的需求......

Answer 3

试试这个^^

$(document).ready(function() {
        $("form").bind("keypress", function(e) {
            if (e.keyCode == 13) {
                return false;
            }
        });
    });

希望这可以帮助

Answer 4

在您的表单标签中，只需粘贴以下内容：

onkeypress="return event.keyCode != 13;"

例

<input type="text" class="search" placeholder="search" onkeypress="return event.keyCode != 13;">

如果要在键入和忽略ENTER时进行搜索，这将很有用。

/// Grab the search term
const searchInput = document.querySelector('.search')
/// Update search term when typing
searchInput.addEventListener('keyup', displayMatches)

Answer 5

对于非 javascript 解决方案，尝试将 a<button disabled>Submit</button>放入您的表单中，放置在任何其他提交按钮/输入之前。我建议在<form>开始标签之后立即使用（并使用 CSS 隐藏它，accesskey='-1' 将其从选项卡序列中取出，等等）

AFAICT，用户代理会ENTER在输入中点击时查找第一个提交按钮，如果该按钮被禁用，则将停止寻找另一个。

表单元素的默认按钮是树形顺序中的第一个提交按钮，其表单所有者是该表单元素。

如果用户代理支持让用户隐式提交表单（例如，在某些平台上，在文本字段聚焦时点击“输入”键隐式提交表单），则为默认按钮具有定义激活的表单执行此操作行为必须导致用户代理在该默认按钮上运行合成点击激活步骤。

因此，如果禁用默认按钮，则在使用这种隐式提交机制时不会提交表单。（按钮在禁用时没有激活行为。）

https://www.w3.org/TR/html5/forms.html#implicit-submission

但是，我知道Safari 10 MacOS在这里行为不端，即使默认按钮被禁用也提交表单。

因此，如果您可以假设 javascript，请改为插入。On ， onclick 处理程序将被调用，并且由于它返回 false 提交过程停止。我测试过的浏览器甚至不会做浏览器验证的事情（聚焦第一个无效的表单控件，显示错误消息等）。<button onclick="return false;">Submit</button>ENTER

Answer 6

这是纯javascript

        document.addEventListener('keypress', function (e) {
            if (e.keyCode === 13 || e.which === 13) {
                e.preventDefault();
                return false;
            }
            
        });

Answer 7

这是使用jQuery完成此操作的一种简单方法，它将它限制为适当的输入元素：

//prevent submission of forms when pressing Enter key in a text input
$(document).on('keypress', ':input:not(textarea):not([type=submit])', function (e) {
    if (e.which == 13) e.preventDefault();
});

多亏了这样的回答：/sf/answers/138398851/。

Answer 8

解决方法很简单：

用按钮替换“提交”类型

<input type="button" value="Submit" onclick="this.form.submit()" />