Comment puis-je bloquer ou limiter les caractères spéciaux des champs d'entrée avec jquery?

StackOverflow https://stackoverflow.com/questions/895659

Question

Comment bloquer des caractères spéciaux d'être tapé dans un champ de saisie avec jquery?

Pas de solution correcte

Autres conseils

Un exemple simple utilisant une expression régulière que vous pourriez changer pour autoriser / interdire ce que vous voulez.

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

Je cherchais une réponse limitée à l'entrée que des caractères alphanumériques, mais toujours autorisé l'utilisation des caractères de contrôle (par exemple, backspace, supprimer, onglet) et copier + coller. Aucune des réponses fournies que je satisfait essayé toutes ces exigences, donc je suis venu avec les éléments suivants en utilisant l'événement input.

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

Edit: Comme rinogo a souligné dans les commentaires, l'extrait de code ci-dessus oblige le curseur à la fin de l'entrée lors de la frappe au milieu du texte d'entrée. Je crois que l'extrait de code ci-dessous permet de résoudre ce problème.

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

Réponse courte: empêcher l'événement 'keypress':

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

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

Réponse longue: Utilisez un plugin comme jquery.alphanum

Il y a plusieurs choses à prendre en compte lors de la sélection d'une solution:

  • texte Collé
  • Les caractères de contrôle tels que backspace ou F5 peut être empêchée par le code ci-dessus.
  • é, í, etc Ä
  • arabe ou le chinois ...
  • Compatibilité entre navigateur

Je pense que ce domaine est assez complexe pour justifier l'utilisation d'un plug-in 3rd party. J'ai essayé plusieurs des plug-ins disponibles, mais certains problèmes trouvé chacun d'eux alors je suis allé de l'avant et écrit jquery.alphanum . Le code ressemble à ceci:

$("input").alphanum();

Ou pour un contrôle plus à grains fins, ajouter quelques paramètres:

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

it helps.

Utilisez l'attribut d'entrée de motif de HTML5!

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

Jetez un oeil à le plugin jQuery alphanumérique. 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'});

Utilisez regex pour autoriser / quoi que ce soit désavouer. En outre, pour une version légèrement plus robuste que la réponse acceptée, ce qui permet des caractères qui ne sont pas une valeur clé qui leur est associée (backspace, onglet, les touches fléchées, supprimer, etc.) peut être fait en passant d'abord par l'événement KeyPress et vérifier la clé basée sur keycode au lieu de la valeur.

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

Votre zone de texte:

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

Votre javascript:

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

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

Ecrire un code javascript sur événement onkeypress de zone de texte. selon l'exigence et permettre de restreindre le caractère dans votre zone de texte

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

J'utilise ce code modifiant d'autres que j'ai vu. Le seul grand à l'écriture de l'utilisateur si la clé texte pressé ou collé passer le test de motif (match) (cet exemple est une entrée de texte qui permet seulement 8 chiffres)

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

est un exemple qui empêche l'utilisateur de taper le caractère « a »

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

});
});

codes clés refrence ici:
http://www.expandinghead.net/keycode.html

Oui, vous pouvez le faire en utilisant jQuery comme:

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

et script pour user_availability.php sera:

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

J'ai essayé d'ajouter / et \ , mais pas réussi.


Vous pouvez aussi le faire en utilisant le javascript et le code sera:

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

juste les chiffres:

  

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

ou pour le temps, y compris ":"

  

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

incluant également supprimer et backspace:

  

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

unfortuneatly ne pas avoir à travailler sur un iMAC

Je voulais commenter le commentaire de Alex à la réponse de Dale. Pas possible (d'abord besoin comment « représentant » bien? Cela ne se fera pas très vite .. étrange système.) Alors, comme une réponse:

Backspace peut être ajouté en ajoutant \ b à la définition des expressions régulières comme ceci: [a-zA-Z0-9 \ b]. Ou vous permettent simplement toute la gamme latine, y compris plus ou moins quoi que ce soit des caractères "non exotiques" (contrôle aussi comme caractères backspace): ^ [\ u0000- \ u024F \ u20AC] + $

Seul vrai unicode omble chevalier en dehors latin il y a le signe euro (20ac), ajoutez tout ce que vous pourriez avoir besoin d'autre.

Pour gérer également l'entrée est entré par copier-coller, il suffit de se lier également à l'événement « changement » et vérifiez l'entrée là aussi - la suppression ou striping il / donner un message d'erreur comme « caractères non pris en charge » ..

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

Limiter les caractères spéciaux à chaque touche. Voici une page de test pour les codes clés: 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();
   }
});

Dans angulaire, je besoin d'un bon format de monnaie dans mon champ de texte. Ma solution:

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

Dans le code html ajouter la directive

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

et dans le contrôleur angulaire je permets seulement là pour seulement 1 période, convertir le texte en nombre et ajouter un nombre arrondi sur « flou »

correspondant
...

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

...

Pour remplacer des caractères spéciaux, l'espace et le convertir en minuscules

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


    });]
$(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, '');
          }
       });
    });
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top