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

Comment puis-je empêcher des caractères spéciaux d'être tapés dans un champ d'entrée avec jquery?

96
demandé sur RSolberg 2009-05-22 02:50:42

16 réponses

un exemple simple utilisant une expression régulière que vous pouvez changer pour autoriser/rejeter tout 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;
    }
});
123
répondu Dale 2016-11-08 14:25:17

brève réponse: 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();
})

longue réponse: utilisez un plugin comme jquery.alphanum

il y a plusieurs choses à prendre en considération lors du choix d'une solution:

  • texte collé
  • Les caractères de contrôle
  • comme backspace ou F5 peuvent être empêchés par le code ci-dessus.
  • é, í, ä etc
  • arabe ou Chinois...
  • compatibilité entre navigateurs

je pense que cette zone est assez complexe pour justifier l'utilisation d'un plugin tiers. J'ai essayé plusieurs des plugins disponibles, mais a trouvé quelques problèmes avec eux donc je suis allé de l'avant et a écrit jquery.numérique . Le code ressemble à ceci:

$("input").alphanum();

ou pour grains plus fins de contrôle, d'ajouter quelques paramètres:

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

J'espère que ça aidera.

46
répondu KevSheedy 2013-05-10 14:57:11

je cherchais une réponse qui limitait la saisie à des caractères alphanumériques seulement, mais permettait quand même l'utilisation de caractères de contrôle (p. ex., espace de retour, suppression, onglet) et de copier+coller. Aucune des réponses fournies que j'ai essayées ne satisfaisait à toutes ces exigences, donc j'ai trouvé ce qui suit en utilisant l'événement input .

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

Edit:

Comme rinogo souligné dans le commentaires, l'extrait de code ci-dessus force le curseur à la fin de l'entrée en tapant au milieu du texte d'entrée. Je crois que le 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);
});
45
répondu rexmac 2017-05-23 12:10:41

utilisez l'attribut d'entrée de HTML5!

<input type="text" pattern="^[a-zA-Z0-9]+$" />
12
répondu keepitreal 2015-03-04 20:08:24

regardez le 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'});
9
répondu RSolberg 2018-07-08 10:04:06

utilisez regex pour autoriser / rejeter n'importe quoi. En outre, pour une version légèrement plus robuste que la réponse acceptée, permettant les caractères qui n'ont pas de valeur clé associée à eux (backspace, tab, touches fléchées, supprimer, etc.) peut être fait en passant d'abord par l'événement keypress et vérifiez la clé basée sur keycode au lieu de 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;
        }
});
8
répondu James Mart 2015-06-29 00:58:49

votre textbox:

<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
répondu chandler 2017-07-10 16:41:04

écrivez du code javascript sur onkeypress event de textbox. selon l'exigence autoriser et restreindre le caractère dans votre textbox

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
répondu pratik1020 2015-01-23 15:29:18

j'utilise ce code pour modifier les autres que j'ai vu. Seulement grand à l'utilisateur écrivent si la touche pressée ou collé texte passe le test de modèle (match) (cet exemple est une entrée de texte qui ne permet 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
répondu Pablo Padron 2017-10-03 15:13:38

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 clés reference here:

http://www.expandinghead.net/keycode.html

2
répondu 2009-05-21 23:02:35

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 pour votre utilisateur_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 pas réussi.


vous pouvez également le faire en utilisant javascript & 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
répondu PHP Ferrari 2011-09-20 07:19:06

juste les nombres:

$ ('input.temps").keydown (function(e) { if (E. code-clé> = 48 && E. code-clé< = 57) { return true; } else { return false;} });

ou pour le temps incluant": "

$ ('input.temps").keydown (function(e) { if (E. code-clé> = 48 && E. code-clé< = 58) { return true; } else { return false;} });

, y compris supprimer et retour d'espace:

$ ('input.temps").keydown (function (e) { if ((E. code-clé> = 46 && E. keyCode< = 58) / / E. keyCode= = 8) { return true;} else { return false;} });

unfortuneatly pas à la faire fonctionner sur un iMAC

1
répondu Jonathan Joosten 2012-07-30 14:42:33

voulait Commenter le commentaire d'Alex à la réponse de Dale. Pas possible (d'abord besoin de combien "rep"? Qui a coutume de se produire très bientôt.. étrange système.) Comme réponse:

Backspace peut être ajouté en ajoutant \B à la définition de regex comme ceci: [A-zA-Z0-9\b]. Ou vous permettez tout simplement l'ensemble de la gamme latine, y compris plus ou moins n'importe quoi "Non exotic" caractères (contrôle également des caractères comme backspace): ^[\u0000 - \u024F\u20AC]+$

Seul véritable char unicode en dehors du latin, il y a le signe de l'euro (20ac), ajoutez tout ce dont vous pourriez avoir besoin.

pour gérer également les entrées entrées via copier&coller, il suffit de se lier à l'événement" change "et de vérifier l'entrée là aussi - en le supprimant ou en le rayant / en donnant un message d'erreur comme"not supported characters"..

if (!regex.test($j(this).val())) {
  alert('your input contained not supported characters');
  $j(this).val('');
  return false;
}
1
répondu hyphan 2013-01-15 10:26:03

restreindre les caractères spéciaux sur le clavier. Voici une page 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();
   }
});

en angle, 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 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 correspondant angulaire contrôleur je n'permettent à seulement 1, convertir du texte le nombre et ajouter le numéro de l'arrondissement sur la '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;
}

...
1
répondu Ivor Scott 2016-05-28 18:06:04

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
répondu GirishBabuC 2016-06-12 19:04:12
[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
répondu Govind Pant 2017-01-20 16:39:22