2015-04-01 71 views
3

我有一个相当复杂的表单,它有多个不同的文本区域和文本区域。它在默认使用的条形码中使用的环境,这是在他们使用它们扫描多种产品时的选择,因此关闭输入功能已成为不可行的。防止用户点击Enter除了Textarea

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

<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。我做了一些研究,并使用is()操作者的jQuery

$(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


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

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

+2

您是否尝试过使用'$(event.target)。是(”! textarea“) – 2015-04-01 04:21:29

+0

我不完全确定你正在使用什么*脚本,它是如何得到*中断* ... – 2015-04-01 04:26:46

+0

我不知道这是通过我的研究存在,你可以张贴这是一个适当的r eply所以我可以upvote和接受它,这是按预期工作。 – Tarquin 2015-04-01 04:30:28

回答

8

使用!$(event.target).is("textarea")
还可以使用(而不是event.keyCode; jQuery的正常化它Xbrowser中)event.which

jQuery(function($) { // DOM ready 
 

 
    $(document).on("keydown", function(e) { 
 
    if (e.which === 13 && !$(e.target).is("textarea")) { 
 
     e.preventDefault(); 
 
     console.log("ENTER PREVENTED"); 
 
     return; 
 
    } 
 
    }); 
 

 
});
<form action=""> 
 
    <input name="inp" type="text" placeholder="Click here and hit Enter"> 
 
    <textarea name="txa" id="" cols="30" rows="4" placeholder="Click here and hit Enter"></textarea> 
 
    <input type="submit"> 
 
</form> 
 

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

+0

我做了一个快速搜索 - 但是要验证,console.log不会在不支持这些调试功能的浏览器中出现问题(又名FireBug或chromes内置调试) – Tarquin 2015-04-01 04:37:40

+1

尼斯.. @Roko +1 – 2015-04-01 05:49:12