防止用户按文字区域输入Enter

时间:2015-04-01 04:19:24

标签: 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中使用输入。我做了一些研究并尝试使用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();

任何人都可以建议我如何阻止所有输入的输入键除了textareas。我不会假装自己是一名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


*关于最后一个链接,我需要一个全局解决方案,可以自动阻止表单中可能存在的所有textareas。

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

1 个答案:

答案 0 :(得分:10)

使用!$(event.target).is("textarea")
也可以使用event.which(而不是event.keyCode; jQuery将其标准化为xBrowser)

&#13;
&#13;
jQuery(function($) { // DOM ready

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

});
&#13;
<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>
&#13;
&#13;
&#13;