如何阻止或限制与jQuery的input字段中的特殊字符?

如何阻止特殊字符input到jQuery的input字段?

一个简单的例子,使用正则expression式,你可以改变,以允许/禁止任何你喜欢的。

$('input').on('keypress', function (event) { var regex = new RegExp("^[a-zA-Z0-9]+$"); var key = String.fromCharCode(!event.charCode ? event.which : event.charCode); if (!regex.test(key)) { event.preventDefault(); return false; } }); 

简短的回答:防止“按键”事件:

 $("input").keypress(function(e){ var charCode = !e.charCode ? e.which : e.charCode; if(/* Test for special character */ ) e.preventDefault(); }) 

长答案:使用像jquery.alphanum插件

select解决scheme时需要考虑几件事情:

  • 粘贴文本
  • 通过上面的代码可以防止像退格或F5这样的控制字符。
  • é,í,ä等
  • 阿拉伯文或中文…
  • 跨浏览器兼容性

我认为这个领域是足够复杂的,以保证使用第三方插件。 我尝试了几个可用的插件,但是发现了一些问题,所以我继续写jquery.alphanum 。 代码如下所示:

 $("input").alphanum(); 

或者为了更细致的控制,添加一些设置:

 $("#username").alphanum({ allow : "€$£", disallow : "xyz", allowUpper : false }); 

希望它有帮助。

我一直在寻找一个答案,只限于input字母数字字符,但仍允许使用控制字符(例如,退格键,删除,标签)和复制粘贴。 没有提供的答案,我尝试满足所有这些要求,所以我想出了以下使用input事件。

 $('input').on('input', function() { $(this).val($(this).val().replace(/[^a-z0-9]/gi, '')); }); 

编辑:
正如rinogo在注释中指出的那样,当在input文本的中间input时,上面的代码片段强制光标到input的末尾。 我相信下面的代码片段解决了这个问题。

 $('input').on('input', function() { var c = this.selectionStart, r = /[^a-z0-9]/gi, v = $(this).val(); if(r.test(v)) { $(this).val(v.replace(r, '')); c--; } this.setSelectionRange(c, c); }); 

使用HTML5的模式input属性!

 <input type="text" pattern="^[a-zA-Z0-9]+$" /> 

看看jQuery字母数字插件。 https://github.com/KevinSheedy/jquery.alphanum

 //All of these are from their demo page //only numbers and alpha characters $('.sample1').alphanumeric(); //only numeric $('.sample4').numeric(); //only numeric and the . $('.sample5').numeric({allow:"."}); //all alphanumeric except the . 1 and a $('.sample6').alphanumeric({ichars:'.1a'}); 

你可以通过添加屏蔽input来进一步…

使用正则expression式来允许/禁止任何东西。 而且,对于比接受的答案稍微更健壮的版本,允许不具有与它们相关联的键值的字符(退格,选项卡,箭头键,删除等)可以通过首先通过按键事件来完成,并且检查基于键码而不是价值的钥匙。

 $('#input').bind('keydown', function (event) { switch (event.keyCode) { case 8: // Backspace case 9: // Tab case 13: // Enter case 37: // Left case 38: // Up case 39: // Right case 40: // Down break; default: var regex = new RegExp("^[a-zA-Z0-9.,/ $@()]+$"); var key = event.key; if (!regex.test(key)) { event.preventDefault(); return false; } break; } }); 

在文本框的onkeypress事件上写一些javascript代码。 根据要求允许和限制在您的文本框中的字符

 function isNumberKeyWithStar(evt) { var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 42) return false; return true; } function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } function isNumberKeyForAmount(evt) { var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46) return false; return true; } 

这是一个防止用户input字符“a”的例子

 $(function() { $('input:text').keydown(function(e) { if(e.keyCode==65) return false; }); }); 

关键代码参考在这里:
http://www.expandinghead.net/keycode.html

您的文本框:

 <input type="text" id="name"> 

你的javascript:

 $("#name").keypress(function(event) { var character = String.fromCharCode(event.keyCode); return isValid(character); }); function isValid(str) { return !/[~`!@#$%\^&*()+=\-\[\]\\';,/{}|\\":<>\?]/g.test(str); } 

是的,你可以通过使用jQuery来做到这一点:

 <script> $(document).ready(function() { $("#username").blur(function() { //remove all the class add the messagebox classes and start fading $("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow"); //check the username exists or not from ajax $.post("user_availability.php",{ user_name:$(this).val() } ,function(data) { if(data=='empty') // if username is empty { $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox { //add message and change the class of the box and start fading $(this).html('Empty user id is not allowed').addClass('messageboxerror').fadeTo(900,1); }); } else if(data=='invalid') // if special characters used in username { $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox { //add message and change the class of the box and start fading $(this).html('Sorry, only letters (az), numbers (0-9), and periods (.) are allowed.').addClass('messageboxerror').fadeTo(900,1); }); } else if(data=='no') // if username not avaiable { $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox { //add message and change the class of the box and start fading $(this).html('User id already exists').addClass('messageboxerror').fadeTo(900,1); }); } else { $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox { //add message and change the class of the box and start fading $(this).html('User id available to register').addClass('messageboxok').fadeTo(900,1); }); } }); }); }); </script> <input type="text" id="username" name="username"/><span id="msgbox" style="display:none"></span> 

和脚本为您的user_availability.php将是:

 <?php include'includes/config.php'; //value got from the get method $user_name = trim($_POST['user_name']); if($user_name == ''){ echo "empty"; }elseif(preg_match('/[\'^£$%&*()}{@#~?><>,|=_+¬-]/', $user_name)){ echo "invalid"; }else{ $select = mysql_query("SELECT user_id FROM staff"); $i=0; //this varible contains the array of existing users while($fetch = mysql_fetch_array($select)){ $existing_users[$i] = $fetch['user_id']; $i++; } //checking weather user exists or not in $existing_users array if (in_array($user_name, $existing_users)) { //user name is not availble echo "no"; } else { //user name is available echo "yes"; } } ?> 

我试图添加/\,但没有成功。


你也可以通过使用javascript代码来做到这一点:

 <!-- Check special characters in username start --> <script language="javascript" type="text/javascript"> function check(e) { var keynum var keychar var numcheck // For Internet Explorer if (window.event) { keynum = e.keyCode; } // For Netscape/Firefox/Opera else if (e.which) { keynum = e.which; } keychar = String.fromCharCode(keynum); //List of special characters you want to restrict if (keychar == "'" || keychar == "`" || keychar =="!" || keychar =="@" || keychar =="#" || keychar =="$" || keychar =="%" || keychar =="^" || keychar =="&" || keychar =="*" || keychar =="(" || keychar ==")" || keychar =="-" || keychar =="_" || keychar =="+" || keychar =="=" || keychar =="/" || keychar =="~" || keychar =="<" || keychar ==">" || keychar =="," || keychar ==";" || keychar ==":" || keychar =="|" || keychar =="?" || keychar =="{" || keychar =="}" || keychar =="[" || keychar =="]" || keychar =="¬" || keychar =="£" || keychar =='"' || keychar =="\\") { return false; } else { return true; } } </script> <!-- Check special characters in username end --> <!-- in your form --> User id : <input type="text" id="txtname" name="txtname" onkeypress="return check(event)"/> 

只是数字:

$('input.time')。keydown(function(e){if(e.keyCode> = 48 && e.keyCode <= 57){return true;} else {return false;}});

或时间包括“:”

$('input.time')。keydown(function(e){if(e.keyCode> = 48 && e.keyCode <= 58){return true;} else {return false;}});

还包括删除和退格:

$('input.time')。keydown(function(e){if((e.keyCode> = 46 && e.keyCode <= 58)|| e.keyCode == 8){return true;} else {return假;}});

不幸的是没有得到它在iMAC上工作

想要评论亚历克斯对戴尔答案的评论。 不可能(首先需要多less“代表”?这不会很快发生..奇怪的系统。)所以作为一个答案:

可以通过将\ b添加到正则expression式添加Backspace,如下所示:[a-zA-Z0-9 \ b]。 或者你只是允许整个拉丁范围,包括或多或less的东西“非特殊”的字符(也控制字符像退格):^ [\ u0000- \ u024F \ u20AC] + $

只有真正的unicode字符拉丁外面有欧元符号(20ac),添加任何你可能需要的其他东西。

也要处理通过复制和粘贴input的input,只需绑定到“更改”事件,并检查input在那里 – 删除或条带化/给出一个错误消息,如“不支持的字符”..

 if (!regex.test($j(this).val())) { alert('your input contained not supported characters'); $j(this).val(''); return false; } 

限制按键上的特殊字符。 以下是关键代码的testing页面: http : //www.asquare.net/javascript/tests/KeyCode.html

 var specialChars = [62,33,36,64,35,37,94,38,42,40,41]; some_element.bind("keypress", function(event) { // prevent if in array if($.inArray(event.which,specialChars) != -1) { event.preventDefault(); } }); 

在Angular中,我需要在我的文本字段中使用适当的货币格式。 我的解决scheme

 var angularApp = angular.module('Application', []); ... // new angular directive angularApp.directive('onlyNum', function() { return function( scope, element, attrs) { var specialChars = [62,33,36,64,35,37,94,38,42,40,41]; // prevent these special characters element.bind("keypress", function(event) { if($.inArray(event.which,specialChars) != -1) { prevent( scope, event, attrs) } }); var allowableKeys = [8,9,37,39,46,48,49,50,51,52,53,54,55,56 ,57,96,97,98,99,100,101,102,103,104,105,110,190]; element.bind("keydown", function(event) { if($.inArray(event.which,allowableKeys) == -1) { prevent( scope, event, attrs) } }); }; }) // scope.$apply makes angular aware of your changes function prevent( scope, event, attrs) { scope.$apply(function(){ scope.$eval(attrs.onlyNum); event.preventDefault(); }); event.preventDefault(); } 

在html中添加指令

 <input only-num type="text" maxlength="10" id="amount" placeholder="$XXXX.XX" autocomplete="off" ng-model="vm.amount" ng-change="vm.updateRequest()"> 

而在相应的angular度控制器中,我只允许只有一个周期,将文本转换为数字,并在“模糊”

 ... this.updateRequest = function() { amount = $scope.amount; if (amount != undefined) { document.getElementById('spcf').onkeypress = function (e) { // only allow one period in currency if (e.keyCode === 46 && this.value.split('.').length === 2) { return false; } } // Remove "." When Last Character and round the number on blur $("#amount").on("blur", function() { if (this.value.charAt(this.value.length-1) == ".") { this.value.replace(".",""); $("#amount").val(this.value); } var num = parseFloat(this.value); // check for 'NaN' if its safe continue if (!isNaN(num)) { var num = (Math.round(parseFloat(this.value) * 100) / 100).toFixed(2); $("#amount").val(num); } }); this.data.amountRequested = Math.round(parseFloat(amount) * 100) / 100; } ... 

我用这个代码修改我看到的其他代码。 只有当用户按下或粘贴的文本通过模式testing(匹配)时,才向用户写入(这个例子是只允许8位的文本input)

 $("input").on("keypress paste", function(e){ var c = this.selectionStart, v = $(this).val(); if (e.type == "keypress") var key = String.fromCharCode(!e.charCode ? e.which : e.charCode) else var key = e.originalEvent.clipboardData.getData('Text') var val = v.substr(0, c) + key + v.substr(c, v.length) if (!val.match(/\d{0,8}/) || val.match(/\d{0,8}/).toString() != val) { e.preventDefault() return false } }) 

replace特殊字符,空格并转换为小写

 $(document).ready(function (){ $(document).on("keyup", "#Id", function () { $("#Id").val($("#Id").val().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '').toLowerCase()); }); }); 
 [User below code to restrict special character also $(h.txtAmount).keydown(function (event) { if (event.shiftKey) { event.preventDefault(); } if (event.keyCode == 46 || event.keyCode == 8) { } else { if (event.keyCode < 95) { if (event.keyCode < 48 || event.keyCode > 57) { event.preventDefault(); } } else { if (event.keyCode < 96 || event.keyCode > 105) { event.preventDefault(); } } } });]