javascript - 防止用户点击除 Textarea 之外的 Enter

标签 javascript jquery forms

我有一个相当复杂的表单,它有多个阶段,有许多不同的文本字段和文本区域。它在默认情况下按回车的使用条形码中使用的环境,这是他们选择使用它们扫描大量产品的选择,因此关闭回车功能已成为一种禁忌。

我正在使用表单向导脚本来处理输入阶段的客户端验证。此脚本在填写表单时被回车键打断,并拒绝提交,直到页面刷新。

<a href="javascript:;" class="btn green button-submit">Submit <i class="m-icon-swapright m-icon-white"></i></a>

我有以下代码可以防止在表单上输入并允许在单击上面的链接时提交表单。

$(window).keydown(function (event) {
    if (event.keyCode == 13) {
        event.preventDefault();
        return false;
    }
});

然而,这会阻止在 textarea 中使用 enter。我做了一些研究并尝试使用 jQuery 中的 is() 运算符

$(document).ready(function () {
    $(window).keydown(function (event) {
        if (event.keyCode == 13 && !event.is("textarea")) {
            event.preventDefault();
            return false;
        }
    });
});

这是行不通的,它无法阻止输入中的回车键并像之前那样阻止表单提交。

最后,如果表单验证通过,这是处理提交表单的 javascript

$('#form_wizard_1 .button-submit').click(function () {
    // Can put more onsubmit processing here
    document.getElementById('submit_form').submit();
}).hide();

谁能建议我如何防止在除文本区域之外的所有输入上输入回车键。我不假装自己是 JavaScript 开发人员,尽管我正在努力边学边学。以下是我阅读过的文章,它们要么试图改编代码,要么未能理解如何以正确的方式将其应用于我:

Prevent users from submitting a form by hitting Enter

Prevent Users from submitting form by hitting enter #2

disable enter key on page, but NOT in textarea


*关于最后一个链接,我需要一个全局解决方案,自动阻止它出现在表单中可能存在的所有文本区域上。

一如既往,感谢您的协助。

最佳答案

使用 !$(event.target).is("textarea")
还可以使用 event.which(而不是 event.keyCode;jQuery 为 xBrowser 规范化它)或使用 event.key

jQuery(function($) { // DOM ready

  $('form').on('keydown', function(ev) {
    if (ev.key === "Enter" && !$(ev.target).is('textarea')) {
      ev.preventDefault();
      console.log("ENTER-KEY PREVENTED ON NON-TEXTAREA ELEMENTS");
    }
  });

});
<form>
  <input name="inp" placeholder="Click here and hit Enter" type="text">
  <textarea name="txa" placeholder="Click here and hit Enter"></textarea>
  <input type="submit">
</form>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

关于javascript - 防止用户点击除 Textarea 之外的 Enter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29382790/

相关文章:

javascript - 是否有用于 javascript 的 firebase admin sdk?

jquery - 寻找 JQuery 拖放功能

javascript - 如何在 Firebase Cloud 函数中执行类似 'child-added' 事件的操作?

javascript - 命名空间回调函数

javascript - 不打印 AJAX 的结果

java - SAPUI5应用程序中调用Servlet显示404错误

javascript - 按钮不能正确向下滑动

javascript - 表单提交

php - Laravel 5.2 中同一页面上的 Laravel 登录和注册表单

javascript - 如何在点击时执行脚本