làm cách nào để chặn hoặc hạn chế các ký tự đặc biệt từ các trường nhập bằng jquery?

Làm cách nào để chặn các ký tự đặc biệt được nhập vào trường nhập bằng jquery?

Một ví dụ đơn giản bằng cách sử dụng một biểu thức chính quy mà bạn có thể thay đổi để cho phép / không cho phép bất cứ điều gì bạn thích.

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

Tôi đang tìm kiếm câu trả lời giới hạn đầu vào chỉ với các ký tự chữ và số, nhưng vẫn được phép sử dụng các ký tự điều khiển (ví dụ: xóa lùi, xóa, tab) và sao chép + dán. Không có câu trả lời nào được cung cấp mà tôi đã thử đáp ứng tất cả các yêu cầu này, vì vậy tôi đã đưa ra điều sau bằng cách sử dụng inputsự kiện.

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

Chỉnh sửa:
Như rinogo đã chỉ ra trong các nhận xét, đoạn mã trên buộc con trỏ ở cuối đầu vào khi nhập vào giữa văn bản đầu vào. Tôi tin rằng đoạn mã dưới đây giải quyết được vấn đề này.

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

Câu trả lời ngắn gọn: ngăn sự kiện 'nhấn phím':

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

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

Câu trả lời dài: Sử dụng một plugin như jquery.alphanum

Có một số điều cần xem xét khi chọn một giải pháp:

• Đã dán văn bản
• Các ký tự điều khiển như backspace hoặc F5 có thể bị mã trên ngăn chặn.
• é, í, ä, v.v.
• Tiếng Ả Rập hoặc tiếng Trung ...
• Khả năng tương thích với nhiều trình duyệt

Tôi nghĩ rằng khu vực này đủ phức tạp để đảm bảo sử dụng plugin của bên thứ ba. Tôi đã thử một số plugin có sẵn nhưng nhận thấy một số vấn đề với mỗi plugin nên tôi đã tiếp tục và viết jquery.alphanum . Mã trông như thế này:

$("input").alphanum();

Hoặc để kiểm soát chi tiết hơn, hãy thêm một số cài đặt:

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

Hy vọng nó giúp.

Sử dụng thuộc tính đầu vào mẫu của HTML5!

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

Hộp văn bản của bạn:

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

Javascript của bạn:

$("#name").keypress(function(event) {
    var character = String.fromCharCode(event.keyCode);
    return isValid(character);     
});

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

Sử dụng regex để cho phép / không cho phép bất cứ thứ gì. Ngoài ra, đối với một phiên bản mạnh mẽ hơn một chút so với câu trả lời được chấp nhận, việc cho phép các ký tự không có giá trị khóa được liên kết với chúng (phím xóa lùi, tab, phím mũi tên, xóa, v.v.) có thể được thực hiện bằng cách chuyển qua sự kiện nhấn phím trước và kiểm tra khóa dựa trên mã khóa thay vì giá trị.

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

Hãy xem plugin jQuery alphanumeric. 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'});

Viết một số mã javascript trên sự kiện onkeypress của textbox. theo yêu cầu cho phép và hạn chế ký tự trong hộp văn bản của bạn

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

Tôi sử dụng mã này để sửa đổi những người khác mà tôi đã thấy. Người dùng chỉ viết nếu phím được nhấn hoặc văn bản được dán vượt qua bài kiểm tra mẫu (khớp) (ví dụ này là kiểu nhập văn bản chỉ cho phép 8 chữ số)

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

đây là một ví dụ ngăn người dùng nhập ký tự "a"

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

});
});

mã khóa tham chiếu tại đây:
http://www.expandinghead.net/keycode.html

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

Có, bạn có thể làm bằng cách sử dụng jQuery như:

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

và script cho user_available.php của bạn sẽ là:

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

Tôi đã cố thêm cho / và \ nhưng không thành công.

Bạn cũng có thể làm điều đó bằng cách sử dụng javascript và mã sẽ là:

<!-- 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)"/>

chỉ những con số:

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

hoặc trong thời gian bao gồm ":"

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

cũng bao gồm xóa và xóa lùi:

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

tiếc là không làm cho nó hoạt động trên iMAC

Muốn bình luận về nhận xét của Alex với câu trả lời của Dale. Không thể (trước tiên cần bao nhiêu "đại diện"? Điều đó sẽ không xảy ra rất sớm .. hệ thống kỳ lạ.) Vì vậy, như một câu trả lời:

Backspace có thể được thêm bằng cách thêm \ b vào định nghĩa regex như sau: [a-zA-Z0-9 \ b]. Hoặc bạn chỉ cần cho phép toàn bộ phạm vi tiếng Latinh, bao gồm nhiều hơn hoặc ít hơn bất kỳ ký tự "không kỳ lạ" nào (cũng kiểm soát các ký tự như phím xóa lùi): ^ [\ u0000- \ u024F \ u20AC] + $

Chỉ có ký tự unicode thực bên ngoài tiếng latin mới có ký hiệu euro (20ac), hãy thêm bất cứ thứ gì bạn có thể cần.

Để xử lý dữ liệu nhập được nhập thông qua sao chép và dán, bạn chỉ cần liên kết với sự kiện "thay đổi" và kiểm tra thông tin đầu vào ở đó - xóa hoặc xóa nó / đưa ra thông báo lỗi như "ký tự không được hỗ trợ" ..

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

Hạn chế các ký tự đặc biệt khi nhấn phím. Đây là trang kiểm tra cho các mã khóa: 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();
   }
});

Trong Angular, tôi cần một định dạng tiền tệ phù hợp trong trường văn bản của mình. Giải pháp của tôi:

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

Trong html thêm chỉ thị

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

và trong bộ điều khiển góc tương ứng, tôi chỉ cho phép chỉ có 1 dấu chấm, chuyển đổi văn bản thành số và thêm làm tròn số trên 'mờ'

...

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

...

Để thay thế các ký tự đặc biệt, dấu cách và chuyển đổi thành chữ thường

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


    });]

Chỉ cho phép các số trong TextBox (Hạn chế bảng chữ cái và ký tự đặc biệt)

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