come faccio a bloccare o limitare i caratteri speciali dai campi di input con jquery?


Risposte:


133

Un semplice esempio che utilizza un'espressione regolare che potresti modificare per consentire / non consentire ciò che desideri.

$('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
Questo non funziona per il testo incollato e potrebbe anche impedire all'utente di premere tasti non di testo come backspace, tasti freccia, ecc.
bendytree

6
Ciò non consentirà il backspace in Firefox
Alex

Non funziona per parole spagnole come: avión (aereo), árbol (albero), ecc.
Nikoskip,

Non funziona nell'ultimo browser Firefox, ma funziona bene con Chrome
Phoenix

Questa soluzione funziona per me su un elemento Bootstrap-TagsInput. Per risolvere il problema dell'incolla, puoi semplicemente aggiungere "incolla" all'elenco dei parametri dell'evento in questo modo: $ ('input'). On ('keypress, paste' ', () => ........
Jim22150

60

Stavo cercando una risposta che limitasse l'input ai soli caratteri alfanumerici, ma consentisse comunque l'uso di caratteri di controllo (ad esempio, backspace, cancella, tabulazione) e copia + incolla. Nessuna delle risposte fornite che ho provato ha soddisfatto tutti questi requisiti, quindi ho ottenuto quanto segue utilizzando l' inputevento.

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

Modifica:
come rinogo ha sottolineato nei commenti, lo snippet di codice sopra costringe il cursore alla fine dell'input quando si digita nel mezzo del testo di input. Credo che lo snippet di codice di seguito risolva questo problema.

$('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 Stavo scorrendo le risposte alla ricerca di una risposta come questa o avrei inviato la mia risposta. Questa risposta filtra immediatamente i caratteri non consentiti! Grande!
emilhem

2
+1 Funziona per il testo incollato, non interferisce con il backspace di FF e cancella i tasti e non si basa su event.whicho event.keycode! Vorrei poter +10!
rinogo

3
... MA in Chrome e IE, quando digiti nuovi caratteri o usi il backspace e cancelli i tasti al centro del testo di input , il cursore viene spostato alla fine del testo ...: / Esiste una soluzione semplice per Questo? Volevo così tanto che funzionasse!
rinogo

Così vicino ... questo codice ha un comportamento molto strano in Chrome Mobile. Il cursore salta sulla prima lettera digitata e anche su backspace.
Juliano

2
@ Juliano Interessante, sembra che selectionStart restituisca sempre 0 su Chrome Mobile indipendentemente da dove si trova attualmente il cursore / caret. Non sono (ancora) sicuro che si tratti di un bug o di un comportamento previsto. Sto attualmente effettuando ricerche sul problema e aggiornerò la mia risposta o commento qui quando avrò maggiori informazioni.
rexmac

48

Risposta breve: evita l'evento "pressione dei tasti":

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

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

Risposta lunga: usa un plugin come jquery.alphanum

Ci sono diverse cose da considerare quando si sceglie una soluzione:

  • Testo incollato
  • I caratteri di controllo come backspace o F5 possono essere bloccati dal codice precedente.
  • é, í, ä ecc
  • Arabo o cinese ...
  • Compatibilità cross browser

Penso che quest'area sia abbastanza complessa da giustificare l'utilizzo di un plugin di terze parti. Ho provato diversi plugin disponibili ma ho riscontrato alcuni problemi con ciascuno di essi, quindi sono andato avanti e ho scritto jquery.alphanum . Il codice ha questo aspetto:

$("input").alphanum();

Oppure, per un controllo più dettagliato, aggiungi alcune impostazioni:

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

Spero che sia d'aiuto.


1
Roba fantastica, fantastico. Ho solo dovuto aggiungere un'opzione per abilitare / disabilitare il carattere barra ('/') poiché non funzionava mentre lo mettevo allownell'impostazione. Ma questo è il bello dei plugin jquery, il fatto che puoi modificarli in base alle tue esigenze. Grazie!
Adrian Marinica

Grazie Adrian. A proposito, ho appena provato ad abilitare la barra usando l' allowopzione e ha funzionato bene per me usando questo codice: $('#firstName').alphanum({allow: "/"});C'è qualche possibilità che potresti fornire maggiori informazioni? Se c'è un bug o un problema con i documenti, sarebbe bello risolverlo. Cheers
KevSheedy

Ciao KevSheedy, grazie per aver dedicato del tempo per testarlo. Mi dispiace di non averlo chiarito abbastanza. Il problema era che avevo anche allowOtherCharSets: falsee allowCaseless: false. Questi hanno interferito con le impostazioni impostate in allow. Dal mio punto di vista, penso che l' allowopzione dovrebbe porre il veto su tutte le altre opzioni (come allowOtherCharSetso allowCaseless). Quindi, se si specifica un carattere allownell'opzione, dovrebbe essere consentito indipendentemente dalle altre opzioni impostate nell'oggetto di configurazione. Lo stesso vale per disallow. Ma questa è solo la mia opinione. :) Saluti di nuovo! :)
Adrian Marinica

Buon punto Adrian. Sono andato avanti e ho pubblicato una correzione nella V1.0.6 per creare allowe disallowavere una priorità più alta. È stato registrato nel numero 7 . Spero che aiuti
KevSheedy

6
"così sono andato avanti e ho scritto jquery.alphanum" Fantastico!
Felix

14

Usa l'attributo di input del pattern di HTML5!

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

11
Sebbene questa soluzione prevenga l'invio di caratteri indesiderati, non impedisce l'immissione di caratteri indesiderati nel campo di immissione.
rexmac

1
C'è anche il rischio che l'utente non utilizzi un browser HTML5.
Capitano Kenpachi

Dall'esperienza di UX, una cosa che molte persone odiano più di essere limitate in ciò che possono digitare è che ti viene detto che hai fatto male in seguito. - La forzatura dell'input serve a ridurre i messaggi di errore e le notifiche non valide.
Julix

1
@ Julix È un caso per caso. Ci sono alcuni campi che possono essere solo numerici (prezzo o qualsiasi importo in valuta, ecc.) In cui non ha senso ascoltare l'immissione di caratteri alfabetici. Ma sì, il mio non era davvero una soluzione al problema di OP, ma un modo semplice e piacevole per aiutare con il problema UX.
keepitreal

13

La tua casella di testo:

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

Il tuo javascript:

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

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

@Bhargav Rao, ho eliminato l'altro post duplicato e ho ripubblicato questo perché questo era più appropriato, grazie per averlo fatto notare
chandler

11

Usa regex per consentire / non consentire qualsiasi cosa. Inoltre, per una versione leggermente più robusta rispetto alla risposta accettata, è possibile consentire caratteri a cui non è associato un valore chiave (backspace, tab, tasti freccia, cancella, ecc.) Passando prima attraverso l'evento di pressione dei tasti e controlla la chiave in base al codice chiave anziché al valore.

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

Dai un'occhiata al plugin alfanumerico 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'});

Ce n'è uno per le lettere? Normalmente uso nan solo per i numeri (come un codice postale o un telefono)

3

Scrivi del codice javascript sull'evento onkeypress della casella di testo. secondo il requisito, consentire e limitare il carattere nella casella di testo

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
Funziona se digito manualmente. Ma sono in grado di incollare i caratteri speciali copiati.
Sunil Garg

3

Uso questo codice modificando altri che ho visto. Solo grande per l'utente scrive se il tasto premuto o il testo incollato supera il test del modello (corrispondenza) (questo esempio è un input di testo che consente solo 8 cifre)

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

perché !e.charCode ? e.which : e.charCodee non semplicemente e.charCode ? e.charCode : e.which?
Massimiliano Kraus

quali modifiche è necessario apportare per l'accettazione dei numeri decimali?
ubm

2

questo è un esempio che impedisce all'utente di digitare il carattere "a"

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

});
});

informazioni sui codici chiave qui:
http://www.expandinghead.net/keycode.html


Penso che tutti i codici chiave che non vuoi consentire possano essere travolgenti da provare e gestire.
RSolberg

Se vuoi impedire a qualcuno di inserire solo i numeri da 1 a 5, finisci per gestire 5 codici chiave all'interno del tuo codice.
RSolberg

2
In realtà non è un brutto piano se AlphaNumeric non è il plug-in per te. L'ho fatto funzionare con un'istruzione switch / case. Questo esempio non consente i caratteri non consentiti nei nomi delle directory: $ ('input [type =' text '], textarea'). Keydown (function (ev) {switch (ev.keyCode) {case 47: case 92: case 63: caso 37: caso 42: caso 59: caso 124: caso 34: caso 60: caso 62: ritorno falso;};});
M Miller

@ user434917, il tuo codice non funziona quando lo provo con il browser Chrome mobile Android. hai qualche soluzione per questo ..?
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

Sì, puoi farlo usando jQuery come:

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

e lo script per il tuo user_availability.php sarà:

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

Ho provato ad aggiungere per / e \ ma non ci sono riuscito.


Puoi farlo anche usando javascript e il codice sarà:

<!-- 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
Amico, hai incluso un sacco di codice in eccesso che probabilmente non è utile. Puoi ridurlo al minimo indispensabile? E stava chiedendo di jQuery, non sono sicuro che il PHP sia rilevante.
Simon East,

@PHP Ferrari: Sto usando il codice javascript, il tuo codice funziona bene, come posso visualizzare un messaggio popup di avviso se il cliente inserisce il carattere speciale. Il messaggio come "Caratteri speciali non consentiti".
Gemma

1

solo i numeri:

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

o per il tempo che include ":"

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

includendo anche cancella e backspace:

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

sfortunatamente non farlo funzionare su un iMAC


1

Volevo commentare il commento di Alex alla risposta di Dale. Non possibile (prima serve quante "ripetizioni"? Non succederà molto presto .. strano sistema.) Quindi come risposta:

Backspace può essere aggiunto aggiungendo \ b alla definizione di regex in questo modo: [a-zA-Z0-9 \ b]. Oppure consenti semplicemente l'intero intervallo latino, inclusi più o meno caratteri "non esotici" (anche caratteri di controllo come backspace): ^ [\ u0000- \ u024F \ u20AC] + $

Solo il vero carattere unicode al di fuori del latino c'è il segno dell'euro (20ac), aggiungi tutto ciò di cui potresti aver bisogno.

Per gestire anche l'input inserito tramite copia e incolla, è sufficiente eseguire il binding anche all'evento "modifica" e controllare anche l'input, eliminandolo o rimuovendolo / dando un messaggio di errore come "caratteri non supportati" ..

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

1

Limita i caratteri speciali alla pressione dei tasti. Ecco una pagina di test per i codici chiave: 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();
   }
});

In Angular, avevo bisogno di un formato di valuta appropriato nel mio campo di testo. La mia soluzione:

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

Nell'html aggiungi la direttiva

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

e nel controller angolare corrispondente permetto che ci sia solo 1 punto, converto il testo in numero e aggiungo l'arrotondamento del numero su 'sfocatura'

...

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

Per sostituire caratteri speciali, spazio e convertire in minuscolo

$(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
Le risposte di solo codice non sono troppo utili senza una spiegazione.
Vemonus

0

Consenti solo numeri nella casella di testo (limita alfabeti e caratteri speciali)

        /*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;
    }
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.