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

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

464472 次浏览
小开

这是一个阻止用户键入字符“ a”的示例

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


});
});

密码参考:
Http://www.expandinghead.net/keycode.html

小开

看看 jQuery 的字母数字插件

//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'});
小开

是的，你可以使用 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 _ ability. 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').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.time’) . keydown (function (e){ if (e.keyCode > = 48 & & E.keyCode < = 57){ 返回 true; } else { }) ;

或时间，包括「 : 」

$(‘ input.time’) . keydown (function (e){ if (e.keyCode > = 48 & & E.keyCode < = 58){ 返回 true; } else { }) ;

还包括删除和退格:

$(‘ input.time’) . keydown (function (e){ if ((e.keyCode > = 46 & & E.keyCode < = 58) | | e.keyCode = = 8){返回 true; } else { }) ;

不幸的是没能在 iMAC 上运行

小开

想就 Alex 对 Dale 的回答的评论发表评论。不可能(首先需要多少“代表”？那不会很快发生的。.奇怪的系统) 所以作为回答:

可以通过将 b 添加到正则表达式定义中来添加退格，如下所示: [ a-zA-Z0-9b ]。 或者只是简单地允许整个拉丁范围，包括或多或少的任何“非异域”字符(也可以控制字符，比如 backspace) : ^ [ u0000-u024F u20AC ] + $

只有真正的 Unicode 字符以外的拉丁文有欧元符号(20ac) ，添加任何您可能需要的其他。

要处理通过复制和粘贴输入的输入，只需要绑定到“ change”事件并检查那里的输入——删除它或将其条带化/给出一个错误消息，如“不支持字符”。.

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

我一直在寻找一个答案，限制输入只有字母数字字符，但仍然允许使用控制字符(例如，退格，删除，制表符)和复制 + 粘贴。我尝试提供的答案都不能满足所有这些要求，所以我使用 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);
});
小开

简短的回答: 防止‘ keypress’事件:

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


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

长答案: 使用像 < a href = “ https://github.com/KevinSheedy/jquery.alphanum”rel = “ norefrer”> jquery.alphanum 这样的插件

在选择解决方案时需要考虑以下几点:

  • 粘贴的文本
  • 上面的代码可以防止像退格或 F5这样的控制字符。
  • 是，是，等等
  • 阿拉伯语或中文..。
  • 跨浏览器兼容性

我认为这个领域的复杂程度足以保证使用第三方插件。我尝试了几个可用的插件，但是发现每个插件都有一些问题，所以我继续编写 Jquery.alphanum。代码如下:

$("input").alphanum();

或者为了更细粒度的控制，添加一些设置:

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

希望能有帮助。

小开

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

小开

使用 HTML5的模式输入属性！

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

使用正则表达式允许/不允许任何事情。另外，对于一个稍微更健壮的版本，比接受的答案，允许字符没有一个关联的键值(退格，制表符，箭头键，删除等) ，可以首先通过按键事件，检查键基于键代码，而不是值。

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

限制按键上的特殊字符。这里有一个关键代码的测试页: 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 中，我需要在我的文本字段中使用适当的货币格式，我的解决方案是:

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

在相应的角度控制器中，我只允许有一个周期，将文本转换为数字，并添加数字舍入’模糊’

...


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


...
小开

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

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




});]
小开

你的文本框:

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

我用这段代码修改我看到的其他代码。如果按下的键或粘贴的文本通过了模式测试(匹配) ，则用户只能写大写(这个例子是一个只允许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
}
})
小开 
$(function(){
$('input').keyup(function(){
var input_val = $(this).val();
var inputRGEX = /^[a-zA-Z0-9]*$/;
var inputResult = inputRGEX.test(input_val);
if(!(inputResult))
{
this.value = this.value.replace(/[^a-z0-9\s]/gi, '');
}
});
});
小开

仅允许文本框中的数字(限制字母和特殊字符)

        /*code: 48-57 Numbers
8  - Backspace,
35 - home key, 36 - End key
37-40: Arrow keys, 46 - Delete key*/
function restrictAlphabets(e){
var x=e.which||e.keycode;
if((x>=48 && x<=57) || x==8 ||
(x>=35 && x<=40)|| x==46)
return true;
else
return false;
}
小开 
/**
* Forbids special characters and decimals
* Allows numbers only
* */
const numbersOnly = (evt) => {


let charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode === 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}


let inputResult = /^[0-9]*$/.test(evt.target.value);
if (!inputResult) {
evt.target.value = evt.target.value.replace(/[^a-z0-9\s]/gi, '');
}


return true;
}
小开

HTML:

<input type="text" (keypress)="omitSpecialChar($event)"/>

在 JS:

omitSpecialChar(event) {
const keyPressed = String.fromCharCode(event.keyCode);
const verifyKeyPressed = /^[a-zA-Z\' \u00C0-\u00FF]*$/.test(keyPressed);
return verifyKeyPressed === true;
}

在这个例子中，可以键入重音。

小开

内联使用简单的 onkeypress 事件。

 <input type="text" name="count"  onkeypress="return /[0-9a-zA-Z]/i.test(event.key)">

小开

这个操作不需要 jQuery

您可以使用普通的 JavaScript 实现这一点，您可以将其放在 onKeyUp事件中。

限制-特殊字符

e.target.value = e.target.value.replace(/[^\w]|_/g, '').toLowerCase()

只接受号码

e.target.value = e.target.value.replace(/[^0-9]/g, '').toLowerCase()

只接受小字母表

e.target.value = e.target.value.replace(/[^0-9]/g, '').toLowerCase()

我可以写一些更多的情况，但我必须保持具体的答案。

注意 它将与 jquery、 response、 angle 等一起工作。

小开 
 $(this).val($(this).val().replace(/[^0-9\.]/g,''));
if( $(this).val().indexOf('.') == 0){


$(this).val("");


}

//这是最简单的方法

Indexof 用于验证输入是否以“”开始

小开 
$(document).ready(function() {
$('#Description').bind('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);
if (!(checkEmpty($("#Description").val()))) {
$("#Description").val("");
} //1Apr2022 code end
});
$('#Description').on('change', function() {
if (!(checkEmpty($("#Description").val()))) {
$("#Description").val("");
} //1Apr2022 code end
});
});


function checkEmpty(field) { //1Apr2022 new code
if (field == "" ||
field == null ||
field == "undefinied") {


return false;
} else if (/^\s*$/.test(field)) {
return false;
} else {
return true;
}
}

提交答案