Wie kann ich Sonderzeichen aus Eingabefeldern mit jquery blockieren oder beschränken?

Question

Wie blockiere ich Sonderzeichen mit Jquery in ein Eingabefeld eingegeben werden?

Answer 1

Ein einfaches Beispiel eines regulären Ausdruck mit denen Sie ändern könnten / nicht zulassen, was Sie wollen.

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

Answer 2

Ich war auf der Suche nach einer Antwort, die Eingabe in nur alphanumerischen Zeichen beschränkt, aber immer noch für die Verwendung von Steuerzeichen erlaubt (zum Beispiel Backspace, löschen, Reiter) und Kopie + Paste. Keine der Antworten, die ich versucht alle diese Anforderungen erfüllt, so kam ich mit den folgenden mit dem input Ereignis auf.

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

Bearbeiten
Wie rinogo wies in den Kommentaren aus der obigen Codeausschnitt um den Cursor an das Ende des Eingangs zwingt, wenn sie in der Mitte des Eingabetext eingeben. Ich glaube, der Code-Snippet unten dieses Problem löst.

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

Answer 3

Kurze Antwort: verhindert, dass das 'keypress' 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

Es gibt mehrere Dinge zu beachten, wenn eine Lösung Kommissionierung:

• Pasted Text
• Steuerzeichen wie Backspace oder F5 kann durch den obigen Code verhindert werden.
• é, í, ä usw.
• Arabisch oder Chinesisch ...
• Cross-Browser-Kompatibilität

Ich denke, dass dieser Bereich komplex genug ist, eine 3rd-Party-Plugin zu rechtfertigen verwenden. Ich habe versucht, einige der verfügbaren Plugins heraus gefunden, aber einige Probleme mit jedem von ihnen so ging ich weiter und schrieb jquery.alphanum . Der Code sieht wie folgt aus:

$("input").alphanum();

Während für eine feinkörnige Steuerung, fügen Sie einige Einstellungen:

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

Hoffe, es hilft.

Answer 4

Mit HTML5 des Mustereingabe Attribute!

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

Answer 5

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

Answer 6

Regex verwenden, um etwas zulassen / nicht zulassen. Auch für eine etwas robustere Version als die akzeptierte Antwort, Zeichen ermöglicht, die einen Schlüsselwert nicht mit ihnen (Backspace, Tab, Pfeiltasten, löschen, etc.) zugeordnet sein kann, indem man zuerst die durch den Tastendruck-Ereignis durchgeführt werden und überprüfen Sie die Taste basierend auf keycode statt 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;
        }
});

Answer 7

Ihre Textbox:

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

Answer 8

einig Javascript-Code auf onkeypress Ereignisse von Textbox schreiben. je nach Anforderung lassen und Zeichen in Ihrem Text beschränkt

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

Answer 9

Ich benutze diesen Code zu ändern andere, die ich sah. Nur grand den Benutzer schreiben, wenn die Taste gedrückt oder eingefügter Text den Mustertest (Spiel) passiert (in diesem 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
    }
})

Answer 10

Dies ist ein Beispiel, das den Benutzer von der Eingabe des Buchstaben „a“

verhindern

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

});
});

Tastencodes refrence hier:
http://www.expandinghead.net/keycode.html

Answer 11

Ja, Sie können tun mit jQuery wie:

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

<?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 \ , aber nicht gelungen, hinzuzufügen.

---

Sie können auch tun es, indem Sie Javascript & 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)"/>

Answer 12

nur die Zahlen:

  

$ ( 'input.time'). Keydown (function (e) {if (e.keyCode> = 48 &&   e.keyCode <= 57) {       return true; } Else {       falsch zurückgeben; }});

oder Zeit mit ":"

  

$ ( 'input.time'). Keydown (function (e) {if (e.keyCode> = 48 &&   e.keyCode <= 58) {       return true; } Else {       falsch zurückgeben; }});

einschließlich auch löschen und Backspace:

  

$ ( 'input.time'). Keydown (function (e) {if ((e.keyCode> = 46 &&   e.keyCode <= 58) || e.keyCode == 8) {return true; } Else {             falsch zurückgeben; }});

unfortuneatly bekommt es nicht auf einem iMAC arbeiten

Answer 13

Wollte auf Alex 'Kommentar zu Dale Antwort kommentieren. Nicht möglich (zuerst muß, wie viel „rep“? Das wird nicht sehr bald passieren .. seltsames System.) So als Antwort:

Rücktaste kann wie folgt durch Zugabe von \ b auf die regex Definition hinzugefügt werden: [a-zA-Z0-9 \ b]. Oder Sie einfach erlauben, dem ganzen lateinischen Bereich, darunter mehr oder weniger alles, was „nicht exotische“ Zeichen (auch Zeichen steuern wie Backspace): ^ [\ u0000- \ u024F \ u20AC] + $

Nur echte Unicode-Zeichen außerhalb Latin gibt es das Euro-Zeichen (20ac), fügen Sie, was Sie sonst noch brauchen kann.

Um auch die Eingabe per Copy & Paste eingegeben handhaben, einfach binden auch an die „change“ -Ereignis und überprüfen Sie die Eingabe auch dort - sie löschen oder Striping es / gibt eine Fehlermeldung wie „nicht unterstützten Zeichen“ ..

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

Answer 14

einschränken Specials Zeichen auf Tastendruck. Hier ist eine Testseite für Tastencodes: 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 richtiges 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();
}

In der html die Richtlinie hinzufügen

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

und in dem entsprechenden Winkelregler I lasse nur dort nur 1 Periode sein, Text zu konvertieren und die Anzahl NUM.HINZUFÜ Abrunden auf ‚blur‘

...

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

...

Answer 15

So ersetzen Sonderzeichen, Leerzeichen und Bekehrtfall zu senken

$(document).ready(function (){
  $(document).on("keyup", "#Id", function () {
  $("#Id").val($("#Id").val().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '').toLowerCase());
 }); 
});

Answer 16

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


    });]

Answer 17

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