如何阻止或限制与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(); } } } });]
