jak zablokować lub ograniczyć znaki specjalne z pól wejściowych za pomocą jQuery?

Jak zablokować wpisywanie znaków specjalnych w polu wejściowym za pomocą jQuery?

Prosty przykład z użyciem wyrażenia regularnego, które możesz zmienić, aby zezwolić / zabronić wszystkiego, co chcesz.

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

Szukałem odpowiedzi, która ograniczyłaby wprowadzanie tylko do znaków alfanumerycznych, ale nadal pozwalała na użycie znaków sterujących (np. Backspace, usuń, tabulator) oraz kopiuj + wklej. Żadna z udzielonych odpowiedzi, które wypróbowałem, nie spełniała wszystkich tych wymagań, więc wymyśliłem następujące, używając inputzdarzenia.

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

Edycja:
Jak wskazał rinogo w komentarzach, powyższy fragment kodu wymusza przesunięcie kursora do końca wprowadzania podczas wpisywania w środku tekstu wejściowego. Uważam, że poniższy fragment kodu rozwiązuje ten problem.

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

Krótka odpowiedź: zapobiegaj zdarzeniu „naciśnięcie klawisza”:

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

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

Długa odpowiedź: użyj wtyczki takiej jak jquery.alphanum

Wybierając rozwiązanie, należy wziąć pod uwagę kilka kwestii:

• Wklejony tekst
• Powyższy kod może blokować znaki sterujące, takie jak backspace lub F5.
• é, í, ä itd
• Arabski czy chiński ...
• Zgodność z różnymi przeglądarkami

Myślę, że ten obszar jest na tyle złożony, że wymaga użycia wtyczki innej firmy. Wypróbowałem kilka dostępnych wtyczek, ale z każdą z nich napotkałem pewne problemy, więc napisałem jquery.alphanum . Kod wygląda następująco:

$("input").alphanum();

Aby uzyskać bardziej precyzyjną kontrolę, dodaj kilka ustawień:

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

Mam nadzieję, że to pomoże.

Użyj atrybutu wejściowego wzorca HTML5!

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

Twoje pole tekstowe:

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

Twój javascript:

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

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

Użyj wyrażenia regularnego, aby zezwolić / zabronić czegokolwiek. Ponadto, w przypadku nieco bardziej niezawodnej wersji niż zaakceptowana odpowiedź, zezwolenie na znaki, które nie mają skojarzonej z nimi wartości kluczowej (backspace, tab, klawisze strzałek, delete itp.) Można wykonać, przechodząc najpierw przez zdarzenie keypress i sprawdź klucz na podstawie kodu klucza zamiast wartości.

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

Spójrz na wtyczkę alfanumeryczną 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'});

Napisz kod javascript na zdarzenie onkeypress pola tekstowego. zgodnie z wymaganiami zezwalaj i ograniczaj znaki w polu tekstowym

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

Używam tego kodu modyfikując inne, które widziałem. Tylko wielkie dla użytkownika piszesz, jeśli naciśnięty klawisz lub wklejony tekst przejdzie test wzoru (dopasowanie) (w tym przykładzie jest wprowadzanie tekstu, które dopuszcza tylko 8 cyfr)

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

to jest przykład, który uniemożliwia użytkownikowi wpisanie znaku „a”

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

});
});

kluczowe kody odniesienia tutaj:
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, '');
          }
       });
    });

Tak, możesz to zrobić używając jQuery jako:

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

a skrypt dla twojego user_availability.php będzie:

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

Próbowałem dodać dla / i \, ale nie udało się.

Możesz to również zrobić za pomocą javascript, a kod będzie:

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

same liczby:

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

lub na czas zawierający „:”

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

w tym także delete i backspace:

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

niestety nie działa na iMACu

Chciał skomentować komentarz Alexa do odpowiedzi Dale'a. Niemożliwe (najpierw potrzebujesz, ile „powtórzeń”? To nie nastąpi bardzo szybko… dziwny system). Więc jako odpowiedź:

Backspace można dodać, dodając \ b do definicji wyrażenia regularnego w następujący sposób: [a-zA-Z0-9 \ b]. Lub po prostu zezwalasz na cały zakres alfabetu łacińskiego, w tym mniej więcej wszystkie znaki „nieegzotyczne” (także kontroluj znaki, takie jak backspace): ^ [\ u0000- \ u024F \ u20AC] + $

Tylko prawdziwy znak Unicode poza łaciną jest znak euro (20ac), dodaj wszystko, czego potrzebujesz.

Aby obsłużyć również dane wejściowe wprowadzone za pomocą kopiowania i wklejania, po prostu połącz się ze zdarzeniem „zmień” i sprawdź tam również dane wejściowe - usuwając je lub usuwając / wyświetlając komunikat o błędzie typu „nieobsługiwane znaki”.

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

Ogranicz znaki specjalne po naciśnięciu klawisza. Oto strona testowa dla kluczowych kodów: 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();
   }
});

W Angular potrzebowałem odpowiedniego formatu waluty w moim polu tekstowym. Moje rozwiązanie:

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

W html dodaj dyrektywę

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

iw odpowiednim kontrolerze kątowym pozwalam tylko na 1 okres, konwertuj tekst na liczbę i dodaj zaokrąglanie liczb do `` rozmycia ''

...

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

...

Aby zamienić znaki specjalne, spacje i zamień na małe litery

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


    });]

Zezwalaj tylko na liczby w polu tekstowym (ogranicz alfabety i znaki specjalne)

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