Wie blockiere oder beschränke ich Sonderzeichen aus Eingabefeldern mit jquery?

Wie blockiere ich die Eingabe von Sonderzeichen in ein Eingabefeld mit jquery?

   

Ein einfaches Beispiel, das einen regulären Ausdruck verwendet, den Sie ändern können, um zu erlauben / zu verbieten, was auch immer Sie mögen.

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

Kurze Antwort: Verhindere das “Tastendruck” -Ereignis:

 $("input").keypress(function(e){ var charCode = !e.charCode ? e.which : e.charCode; if(/* Test for special character */ ) e.preventDefault(); }) 

Lange Antwort: Verwenden Sie ein Plugin wie jquery.alphanum

Bei der Auswahl einer Lösung müssen mehrere Dinge berücksichtigt werden:

  • Text eingefügt
  • Steuerzeichen wie Backspace oder F5 können durch den obigen Code verhindert werden.
  • é, í, ä usw
  • Arabisch oder Chinesisch …
  • Cross-Browser-Kompatibilität

Ich denke, dass dieser Bereich komplex genug ist, um ein Drittanbieter-Plugin zu verwenden. Ich habe einige der verfügbaren Plugins ausprobiert, habe aber Probleme mit jedem von ihnen gefunden, also habe ich jquery.alphanum geschrieben . Der Code sieht so aus:

 $("input").alphanum(); 

Oder fügen Sie zur feineren Steuerung einige Einstellungen hinzu:

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

Ich hoffe es hilft.

Ich suchte nach einer Antwort, die die Eingabe auf nur alphanumerische Zeichen beschränkte, aber immer noch die Verwendung von Steuerzeichen (z. B. Rückschritt, Löschen, Tab) und Kopieren + Einfügen erlaubte. Keine der bereitgestellten Antworten, die ich ausprobierte, erfüllte alle diese Anforderungen, so dass ich das folgende mit dem input .

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

Bearbeiten:
Wie rinogo in den Kommentaren darauf hingewiesen hat, zwingt das obige Code-Snippet den Cursor an das Ende der Eingabe, wenn in der Mitte des Eingabetextes getippt wird. Ich glaube, dass das folgende Code-Snippet dieses Problem triggers.

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

Verwenden Sie das Mustereingabeattribut von HTML5!

  

Werfen Sie einen Blick auf das alphanumerische jQuery-Plugin. 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'}); 

Verwenden Sie Regex, um alles zuzulassen / abzulehnen. Für eine etwas robustere Version als die akzeptierte Antwort kann das Zulassen von Zeichen, denen kein Schlüsselwert zugeordnet ist (Rücktaste, Tabulator, Pfeiltasten, Löschen usw.), durchgeführt werden, indem zuerst das Tastenkürzel-Ereignis durchlaufen wird und Überprüfen Sie den Schlüssel basierend auf Schlüsselcode anstelle von Wert.

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

Deine Textbox:

  

Dein Javascript:

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

Schreibe etwas Javascript Code auf onkeypress event of textbox. gemäß der Anforderung erlauben und beschränken Zeichen in Ihrem Textfeld

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

Ich benutze diesen Code, um andere zu ändern, die ich gesehen habe. Nur großartig für den Benutzer schreiben, wenn die Taste gedrückt oder eingefügt Text den Muster Test (Match) übergeben (dieses Beispiel ist eine Texteingabe, die nur 8 Ziffern erlaubt)

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

Dies ist ein Beispiel, das den Benutzer daran hindert, das Zeichen “a” einzugeben.

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

Schlüsselcodes finden Sie hier:
http://www.expandinghead.net/keycode.html

Ja, Sie können jQuery verwenden als:

   

und Skript für Ihre user_availability.php wird:

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

Ich habe versucht, für / und \ hinzuzufügen, aber nicht erfolgreich.


Sie können es auch tun, indem Sie JavaScript und Code verwenden:

     User id :  

nur die Zahlen:

$ (‘input.time’). keydown (funktion (e) {if (e.keyCode> = 48 && e.keyCode < = 57) {return wahr;} else {return false;}});

oder für die Zeit einschließlich “:”

$ (‘input.time’). keydown (funktion (e) {if (e.keyCode> = 48 && e.keyCode < = 58) {return wahr;} else {return false;}});

auch einschließlich delete und backspace:

$ (‘input.time’). keydown (funktion (e) {if ((e.keyCode> = 46 && e.keyCode < = 58) || e.keyCode == 8) {true zurück;} else {return falsch;}});

leider nicht auf einem iMAC arbeiten

Wollte Alex ‘Kommentar zu Dales Antwort kommentieren. Nicht möglich (erstens, wie viel “rep”? Das wird nicht sehr bald passieren .. seltsames System.) Also als Antwort:

Die Rücktaste kann durch Hinzufügen von \ b zur Regex-Definition wie folgt hinzugefügt werden: [a-zA-Z0-9 \ b]. Oder Sie lassen einfach den gesamten lateinischen Bereich zu, einschließlich mehr oder weniger aller “nicht exotischen” Zeichen (auch Zeichen wie Rücktaste steuern): ^ [\ u0000-\ u024F \ u20AC] + $

Nur echte Unicode-Zeichen außerhalb Latein gibt es das Eurozeichen (20ac), fügen Sie hinzu, was Sie sonst noch brauchen können.

Um auch Eingaben zu verarbeiten, die per Copy & Paste eingegeben wurden, binden Sie einfach auch an das Ereignis “change” und überprüfen dort auch die Eingaben – löschen oder stripen / geben eine Fehlermeldung wie “nicht unterstützte Zeichen” aus.

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

Beschränken Sie Sonderzeichen auf Tastendruck. Hier ist eine Testseite für Schlüsselcodes: 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(); } }); 

In Angular brauchte ich ein korrektes Währungsformat in meinem Textfeld. Meine Lösung:

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

Im HTML-Code fügen Sie die Direktive hinzu

  

und im entsprechenden angularregler erlaube ich nur, dass es nur 1 Punkt gibt, wandle Text in Zahl um und füge Zahlenrundung zu ‘Unschärfe’ hinzu

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

Ersetzen Sie Sonderzeichen, Leerzeichen und konvertieren Sie sie in Kleinbuchstaben

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