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

Comment empêcher la saisie de caractères spéciaux dans un champ de saisie avec jquery?

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

...

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

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


    });]

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

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