Comment bloquer ou restreindre les caractères spéciaux des champs de saisie avec jquery?


Réponses:


133

Un exemple simple utilisant une expression régulière que vous pouvez modifier 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;
    }
});

49
Cela ne fonctionne pas pour le texte collé et peut également empêcher l'utilisateur d'
appuyer sur des

6
Cela ne permettra pas le retour arrière dans Firefox
Alex

Ne fonctionne pas pour les mots espagnols comme: avión (avion), árbol (arbre), etc.
nikoskip

Cela ne fonctionne pas dans le dernier navigateur Firefox, mais fonctionne bien dans Chrome
Phoenix

Cette solution fonctionne pour moi sur un élément Bootstrap-TagsInput. Pour résoudre le problème de collage, vous pouvez simplement ajouter "coller" à la liste des paramètres d'événement comme ceci: $ ('input'). On ('keypress, paste' ', () => ........
Jim22150

60

Je cherchais une réponse qui restreignait la saisie aux seuls caractères alphanumériques, mais autorisait toujours l'utilisation de caractères de contrôle (par exemple, retour arrière, suppression, tabulation) et copier + coller. Aucune des réponses fournies que j'ai essayées ne répondait à toutes ces exigences, j'ai donc proposé ce qui suit en utilisant l' inputévénement.

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

Edit:
Comme Rinogo l'a souligné dans les commentaires, l'extrait de code ci-dessus force le curseur à la fin de l'entrée lors de la saisie au milieu du texte d'entrée. Je pense que l'extrait de code ci-dessous résout 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);
});

1
+1 Je faisais défiler les réponses à la recherche d'une réponse comme celle-ci ou je soumettrais ma propre réponse. Cette réponse filtre instantanément tous les personnages non autorisés! Génial!
emilhem

2
+1 Fonctionne pour le texte collé, n'interfère pas avec les touches de retour arrière et de suppression de FF, et ne repose pas sur event.whichou event.keycode! J'aimerais pouvoir +10!
rinogo

3
... MAIS dans Chrome et IE, lorsque vous tapez de nouveaux caractères ou utilisez les touches de retour arrière et de suppression au milieu du texte d'entrée , le curseur est déplacé à la fin du texte ...: / Existe-t-il une solution de contournement simple pour ce? Je voulais tellement que cela fonctionne!
rinogo

Si proche ... ce code a un comportement très étrange dans Chrome Mobile. Le curseur saute sur la première lettre tapée et sur le retour arrière aussi.
Juliano

2
@Juliano Intéressant, il semble que selectionStart renvoie toujours 0 sur Chrome Mobile quel que soit l'endroit où le curseur / curseur est actuellement positionné. Je ne sais pas (encore) s'il s'agit d'un bogue ou d'un comportement intentionnel. Je recherche actuellement le problème et je mettrai à jour ma réponse ou mon commentaire ici lorsque j'en saurai plus.
rexmac

48

Réponse courte: évitez 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 à considérer lors du choix d'une solution:

  • Texte collé
  • Les caractères de contrôle comme le retour arrière ou F5 peuvent être empêchés par le code ci-dessus.
  • é, í, ä etc.
  • Arabe ou chinois ...
  • Compatibilité entre navigateurs

Je pense que ce domaine est suffisamment complexe pour justifier l'utilisation d'un plugin tiers. J'ai essayé plusieurs des plugins disponibles mais j'ai trouvé des problèmes avec chacun d'eux, alors j'ai continué et j'ai écrit jquery.alphanum . Le code ressemble à ceci:

$("input").alphanum();

Ou pour un contrôle plus fin, ajoutez quelques paramètres:

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

J'espère que ça aide.


1
Super homme, génial. Je devais juste ajouter une option pour activer / désactiver le caractère slash ('/') car cela ne fonctionnait pas en le mettant dans le allowparamètre. Mais c'est la beauté des plugins jquery, le fait que vous puissiez les modifier en fonction de vos besoins. Merci!
Adrian Marinica

Merci Adrian. Btw, j'ai juste essayé d'activer la barre oblique en utilisant l' allowoption et cela a fonctionné bien pour moi en utilisant ce code: $('#firstName').alphanum({allow: "/"});Avez-vous une chance de fournir plus d'informations? S'il y a un bogue ou un problème avec la documentation, ce serait bien de le faire réparer. Cheers
KevSheedy

Salut KevSheedy, merci d'avoir pris le temps de tester cela. Désolé, je n'ai pas été assez clair. Le problème était que j'avais aussi allowOtherCharSets: falseet allowCaseless: false. Ceux-ci ont interféré avec les paramètres définis dans allow. De mon point de vue, je pense que l' allowoption devrait opposer son veto à toutes les autres options (comme allowOtherCharSetsou allowCaseless). Donc, si vous spécifiez un caractère dans l' allowoption, il doit être autorisé quelles que soient les autres options définies dans l'objet de configuration. Il en va de même disallow. Mais ce n'est que mon avis. :) Bravo encore! :)
Adrian Marinica

Bon point Adrian. Je suis allé de l'avant et j'ai publié un correctif dans la V1.0.6 pour créer allowet disallowavoir une priorité plus élevée. Il est connecté dans le numéro 7 . J'espère que ça aide
KevSheedy

6
"alors je suis allé de l'avant et j'ai écrit jquery.alphanum" Génial!
Felix

14

Utilisez l'attribut d'entrée de modèle de HTML5!

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

11
Bien que cette solution empêche l'envoi de caractères indésirables, elle n'empêche pas la saisie de caractères indésirables dans le champ de saisie.
rexmac

1
Il existe également un risque que l'utilisateur n'utilise pas de navigateur HTML5.
Captain Kenpachi

D'après l'expérience UX, une chose que beaucoup de gens détestent plus que d'être restreint dans ce qu'ils peuvent taper, c'est de se faire dire que vous l'avez mal fait par la suite. - Forcer l'entrée consiste à réduire les messages d'erreur et les notifications invalides.
Julix

1
@Julix C'est une chose au cas par cas. Certains champs ne peuvent être que numériques (prix ou montant en devise, etc.) où il n'est pas logique d'écouter la saisie de caractères alphabétiques. Mais oui, le mien n'était pas vraiment une solution au problème d'OP mais un moyen simple et agréable d'aider avec le problème UX.
keepitreal

13

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

@Bhargav Rao, j'ai supprimé l'autre post en double et republié celui-ci parce que celui-ci était plus approprié, merci de l'avoir signalé
chandler

11

Utilisez regex pour autoriser / interdire quoi que ce soit. Aussi, pour une version légèrement plus robuste que la réponse acceptée, autoriser les caractères sans valeur de clé associée (retour arrière, tabulation, touches fléchées, suppression, etc.) peut être effectué en passant d'abord par l'événement keypress et vérifiez la clé en fonction du code clé 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;
        }
});

11

Jetez un œil au plugin alphanumérique 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'});

Y en a-t-il un pour les lettres? Normalement, je n'utilise nan que pour les chiffres (comme un code postal ou un téléphone)

3

Écrivez du code javascript sur l'événement onkeypress de la zone de texte. selon l'exigence autoriser et 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;
}


1
Cela fonctionne si je tape manuellement. Mais je suis capable de coller des caractères spéciaux copiés.
Sunil Garg le

3

J'utilise ce code en modifiant les autres que j'ai vus. Seulement grand à l'écriture de l'utilisateur si la touche enfoncée ou le texte collé réussit le test de modèle (correspondance) (cet exemple est une entrée de texte qui n'autorise que 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
    }
})

pourquoi !e.charCode ? e.which : e.charCodeet pas simplement e.charCode ? e.charCode : e.which?
Massimiliano Kraus

Quels changements faut-il apporter pour l'acceptation des nombres décimaux?
ubm

2

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

});
});

référence des codes clés ici:
http://www.expandinghead.net/keycode.html


Je pense que tous les codes clés que vous ne voulez pas autoriser peuvent être accablants à essayer et à gérer.
RSolberg

Si vous souhaitez empêcher quelqu'un de ne pouvoir saisir que les chiffres 1 à 5, vous finissez par gérer 5 codes clés dans votre code.
RSolberg

2
Ce n'est en fait pas un mauvais plan si AlphaNumeric n'est pas le plugin qu'il vous faut. Je l'ai fait fonctionner avec une instruction switch / case. Cet exemple n'autorise pas les caractères non autorisés dans les noms de répertoire: $ ('input [type =' text '], textarea'). Keydown (function (ev) {switch (ev.keyCode) {case 47: case 92: case 63: cas 37: cas 42: cas 59: cas 124: cas 34: cas 60: cas 62: retour faux;};});
M Miller

@ user434917, votre code ne fonctionne pas lorsque je le teste avec le navigateur Chrome mobile Android. avez-vous une solution pour cela ..?
Pranesh Janarthanan

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

1

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 le script de votre 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 pour / et \ mais je n'ai pas réussi.


Vous pouvez également le faire en utilisant 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)"/>

2
Mec, vous avez inclus tout un tas de code excédentaire qui n'est probablement pas utile. Pouvez-vous le réduire au strict minimum? Et il posait des questions sur jQuery, je ne sais pas si le PHP est pertinent.
Simon East

@PHP Ferrari: J'utilise du code javascript, votre code fonctionne correctement, comment puis-je afficher un message d'alerte contextuel si le client entre le caractère spécial. Le message comme "Caractères spéciaux non autorisés".
Gem

1

juste les chiffres:

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

ou pour le temps comprenant ":"

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

y compris également la suppression et le retour arrière:

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

malheureusement ne pas le faire fonctionner sur un iMAC


1

Je voulais commenter le commentaire d'Alex à la réponse de Dale. Pas possible (il faut d'abord combien de "rep"? Cela n'arrivera pas très vite .. système étrange.) Donc, comme réponse:

Le retour arrière peut être ajouté en ajoutant \ b à la définition de l'expression régulière comme ceci: [a-zA-Z0-9 \ b]. Ou vous autorisez simplement toute la plage latine, y compris plus ou moins tout caractère "non exotique" (contrôle également les caractères comme le retour arrière): ^ [\ u0000- \ u024F \ u20AC] + $

Seul le vrai caractère unicode en dehors du latin, il y a le signe euro (20ac), ajoutez tout ce dont vous pourriez avoir besoin.

Pour gérer également les entrées saisies par copier-coller, il vous suffit de vous lier à l'événement "change" et de vérifier également l'entrée - en la supprimant ou en la rayant / en donnant un message d'erreur du type "caractères non pris en charge".

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

1

Restreindre les caractères spéciaux en appuyant sur une 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 Angular, j'avais besoin d'un format de devise approprié 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 html, ajoutez 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 correspondant, je n'autorise qu'une seule période, je convertis le texte en nombre et j'ajoute l'arrondi des nombres sur `` flou ''

...

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

...

1

Pour remplacer les caractères spéciaux, espace et 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());
 }); 
});

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


    });]

4
Les réponses de code uniquement ne sont pas trop utiles sans explication.
Vemonus

0

Autoriser uniquement les nombres dans TextBox (restreindre les alphabets et les caractères spéciaux)

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

0
/**
     * 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;
    }
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.