web-dev-qa-db-fra.com

comment puis-je bloquer ou restreindre les caractères spéciaux des champs de saisie avec jquery?

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

jqueryspecial-charactersalphanumeric
100
Nerd Stalker

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

Réponse courte: empêcher l'événement 'pression au clavier':

$("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 tel que jquery.alphanum

Il y a plusieurs choses à considérer lors du choix d'une solution:

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

Je pense que cette zone est suffisamment complexe pour justifier l’utilisation d’un plugin tiers. J’ai essayé plusieurs des plugins disponibles, mais j’ai rencontré quelques problèmes avec chacun d’entre eux, j’ai donc décidé d’écrire 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.

47
KevSheedy

Je recherchais une réponse qui limitait la saisie aux seuls caractères alphanumériques, mais permettait 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, aussi ai-je proposé ce qui suit en utilisant l'événement input.

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

Modifier:
Comme le souligne rinogo dans les commentaires, le fragment de code ci-dessus force le curseur à la fin de la saisie lors de la saisie au milieu du texte saisi. Je crois 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);
});
47
rexmac

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

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

Utilisez regex pour autoriser/interdire quoi que ce soit. En outre, pour une version légèrement plus robuste que la réponse acceptée, il est possible d’autoriser les caractères auxquels aucune valeur de clé n’est associée (retour arrière, touche de tabulation, touches fléchées, suppression, etc.) 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;
        }
});
9
James Mart

Jetez un coup d'oeil au plugin jQuery alphanumeric. 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'});
9
RSolberg

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

Ecrivez du code javascript sur l'événement onkeypress de la 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;
}

3
pratik1020

J'utilise ce code pour modifier les autres que j'ai vus. Si vous appuyez sur la touche ou que vous collez du texte, le test de mise en correspondance (correspondance) est correct (cet exemple correspond à une saisie de texte n'autorisant 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
    }
})
3
Pablo Padron

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;

});
});

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

2
user434917

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

Vous pouvez ajouter un retour arrière en ajoutant\b à la définition de regex comme ceci: [a-zA-Z0-9\b] . Vous pouvez simplement autoriser l’ensemble de la plage latine, y compris plus ou moins tout caractère "non exotique" ( contrôle également les caractères tels que le retour arrière): ^ [\ u0000-\u024F\u20AC] + $

Seul le véritable caractère Unicode en dehors du latin est le symbole de l'euro (20ac), ajoutez tout ce dont vous avez besoin.

Pour gérer également les entrées saisies via copier-coller, associez-vous simplement à l'événement "change" et vérifiez-les également - en les supprimant ou en les 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
hyphan

juste les chiffres:

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

ou pour le temps incluant ":"

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

incluant également delete et backspace:

$ ('input.time'). keydown (fonction (e) {if ((e.CodeCode> = 46 && e.CodeCode <= 58) || e.CodeCode == 8) {retour vrai;} else { return false;}});

malheureusement, ne pas le faire fonctionner sur un iMac

1
Jonathan Joosten

Oui, vous pouvez le faire en utilisant jQuery en tant que:

<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 pour 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 / et \ mais sans succès.

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)"/>
1
PHP Ferrari

Restreindre les caractères spéciaux sur la touche. Voici une page de test pour les codes de clé: 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 ne permets qu’il n’y ait qu’une période, convertisse le texte en nombre et ajoute le nombre arrondi 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
Ivor Scott

Pour remplacer des caractères spéciaux, espacez et convertissez-les 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
GirishBabuC
$(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, '');
          }
       });
    });
0
Ranjith Rana
[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();
                }
            }
        }


    });]
0
Govind Pant