如何使用jquery阻止或限制输入字段中的特殊字符？

Question

如何阻止使用jquery输入到输入字段中的特殊字符？

Answer 1

这是防止用户refrence在这里输入字符 “a”

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

}); 
}); 

键码的例子：
http://www.expandinghead.net/keycode.html

Answer 2

看看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'}); 

您可以通过添加masked inputs一步借此...

Answer 3

是的，你可以通过使用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 (a-z), 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)"/> 

Answer 4

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

$('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; 
    } 
}); 

Answer 5

只是数字：

$（ 'input.time'）的keydown（函数（E）{如果（e.keyCode> = 48 & & e.keyCode < = 57 ）{ return true;} else { return false;}}）;

或时间，包括 “：”。

$（ 'input.time'）的keydown（函数（E）{如果（e.keyCode> = 48 & & e.keyCode < = 58）{ return true;} else { return false;}}）;

还包括删除和退格：

$（ 'input.time'）的keydown（函数（E）{如果（（e.keyCode> = 46 & & e.keyCode < = 58）|| e。keyCode == 8）{return true; } else { return false; }}）;

unfortuneatly没有得到它在一台iMac

工作

Answer 6

通缉亚历克斯对戴尔的回答评论发表评论。不可能（首先需要多少“代表”？这不会很快发生..奇怪的系统） 因此作为回答：

退格可以通过添加\ b添加到像这样的正则表达式定义：[a- ZA-Z0-9 \ b]。 或者你干脆让整个拉美范围，包括更多或更少的东西“非异国情调”的字符（也控制诸如退格字符）：^ [\ u0000- \ u024F \ u20AC] + $

只有真正的unicode以外拉丁字符有欧元符号（20ac），添加任何你可能需要的东西。

同时还处理通过复制粘贴&输入的输入，简单地也结合了“改变”事件，并检查输入有太多 - 删除它或它条带化/让像“不支持的字符”错误消息..

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

Answer 7

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

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

编辑：
作为rinogo在评论中指出，上面的代码段中的输入文本中间打字时光标强制输入的结束。我相信下面的代码片段解决了这个问题。

$('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); 
}); 

Answer 8

简短的回答：防止 '按键' 事件：

$("input").keypress(function(e){ 
    var charCode = !e.charCode ? e.which : e.charCode; 

    if(/* Test for special character */) 
     e.preventDefault(); 
}) 

龙答：使用像jquery.alphanum

有几件事情采摘的解决方案时需要考虑的一个插件：

• 粘贴文本
• 上述代码可能会阻止控制字符（如退格键或F5）。
• E，I，ä等
• 阿拉伯语或中国...
• 跨浏览器兼容

我觉得这个面积足够复杂的使用第三方插件来保证。我尝试了几个可用的插件，但发现它们每个都存在一些问题，所以我继续写下jquery.alphanum。代码如下所示：

$("input").alphanum(); 

或了解更多细粒度的控制，增加一些设置：

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

希望它能帮助。

Answer 9

在文本框的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; 
} 

Answer 10

使用HTML5的模式输入属性限制字符！

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

Answer 11

使用正则表达式来允许/禁止任何操作。另外，对于比接受的答案稍微更健壮的版本，允许不具有与它们相关联的键值的字符（退格，选项卡，箭头键，删除等）可以通过首先经过按键事件并且根据键码而不是值检查密钥。

$('#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; 
     } 
}); 

Answer 12

限制按键上的特殊字符。下面是关键代码的测试页：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(); 
    } 
}); 

在转角，我需要一个合适的货币格式的文本框我。我的解决办法：

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()"> 

，并在相应的角控制器我只允许有到只有1周期，将文本转换为数字，并添加“模糊四舍五入数“

... 

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; 
} 

... 

Answer 13

要替换的特殊字符，空间和转换为小写

$(document).ready(function(){ 
    $(document).on("keyup", "#Id", function() { 
    $("#Id").val($("#Id").val().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '').toLowerCase()); 
}); 
}); 

Answer 14

[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(); 
       } 
      } 
     } 


    });] 

Answer 15

你的文本框：

<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); 
} 

Answer 16

我使用此代码修改别人，我所看到的。仅当键按下或粘贴的文本传递模式测试（匹配）隆重给用户写（本实施例中是一个文本输入，只允许8位）

$("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 
    } 
})