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

Wie verhindere ich, dass Sonderzeichen mit jquery in ein Eingabefeld eingegeben werden?

Ein einfaches Beispiel mit einem regulären Ausdruck, den Sie ändern können, um zuzulassen / zu verbieten, was Sie möchten.

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

Ich suchte nach einer Antwort, die die Eingabe nur auf alphanumerische Zeichen beschränkte, aber dennoch die Verwendung von Steuerzeichen (z. B. Rücktaste, Löschen, Tabulator) und Kopieren + Einfügen zuließ. Keine der Antworten, die ich ausprobiert habe, hat alle diese Anforderungen erfüllt, daher habe ich anhand des inputEreignisses Folgendes gefunden .

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

Bearbeiten:
Wie Rinogo in den Kommentaren hervorhob , zwingt das obige Code-Snippet den Cursor beim Eingeben in die Mitte des Eingabetextes an das Ende der Eingabe. Ich glaube, das folgende Code-Snippet löst dieses 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);
});

Kurze Antwort: Verhindern Sie 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 sind mehrere Dinge zu beachten:

• Text einfügen
• Steuerzeichen wie Rücktaste oder F5 können durch den obigen Code verhindert werden.
• é, í, ä etc.
• Arabisch oder Chinesisch ...
• Browserübergreifende Kompatibilität

Ich denke, dieser Bereich ist komplex genug, um die Verwendung eines Plugins eines Drittanbieters zu rechtfertigen. Ich habe einige der verfügbaren Plugins ausprobiert, aber bei jedem einige Probleme festgestellt, also habe ich jquery.alphanum geschrieben . Der Code sieht folgendermaßen aus:

$("input").alphanum();

Oder fügen Sie für eine feinere Steuerung einige Einstellungen hinzu:

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

Ich hoffe es hilft.

Verwenden Sie das Mustereingabeattribut von HTML5!

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

Ihr Textfeld:

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

Ihr Javascript:

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

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

Verwenden Sie Regex, um etwas zuzulassen / zu verbieten. Bei einer etwas robusteren Version als der akzeptierten Antwort können Zeichen, denen kein Tastenwert zugeordnet ist (Rücktaste, Tabulatortaste, Pfeiltasten, Löschen usw.), zuerst durch Drücken des Tastendruckereignisses und Überprüfen Sie den Schlüssel anhand des Schlüsselcodes anstelle des Werts.

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

Schauen Sie sich das alphanumerische Plugin jQuery an. 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'});

Schreiben Sie einen Javascript-Code in das Ereignis onkeypress des Textfelds. Erlauben und beschränken Sie je nach Anforderung das 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 gedrückte Taste oder der eingefügte Text den Mustertest (Übereinstimmung) besteht (dieses Beispiel ist eine Texteingabe, die nur 8 Stellen zulässt).

$("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üsselcode-Aktualisierung hier:
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, '');
          }
       });
    });

Ja, Sie können jQuery wie folgt verwenden:

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

und Skript für Ihre user_availability.php lautet :

<?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 es ist mir nicht gelungen.

Sie können es auch mit Javascript tun und Code wird sein:

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

nur die Zahlen:

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

oder für die Zeit einschließlich ":"

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

auch einschließlich Löschen und Rücktaste:

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

Leider funktioniert es nicht auf einem iMAC

Wollte Alex 'Kommentar zu Dales Antwort kommentieren. Nicht möglich (brauche zuerst 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 "nicht exotischer" Zeichen (auch Steuerzeichen wie Rücktaste): ^ [\ u0000- \ u024F \ u20AC] + $

Nur echtes Unicode-Zeichen außerhalb von Latein gibt es das Euro-Zeichen (20ac), fügen Sie hinzu, was Sie sonst noch brauchen.

Um auch Eingaben zu verarbeiten, die per Copy & Paste eingegeben wurden, binden Sie einfach an das Ereignis "change" und überprüfen Sie die Eingabe dort - löschen oder streifen Sie sie / geben Sie 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 beim 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 geeignetes 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();
}

Fügen Sie im HTML die Direktive hinzu

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

und im entsprechenden Winkelregler erlaube ich nur 1 Periode, konvertiere Text in Zahl und füge Zahlenrundung bei '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;
}

...

Um Sonderzeichen zu ersetzen, setzen Sie Leerzeichen und konvertieren 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();
                }
            }
        }


    });]

Erlaube nur Zahlen in TextBox (Alphabete und Sonderzeichen einschränken)

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