Come faccio a bloccare o limitare i caratteri speciali da campi di input con jQuery?

Question

Come faccio a bloccare i caratteri speciali da essere digitato in un campo di input con jQuery?

Answer 1

Un semplice esempio utilizzando un'espressione regolare che si potrebbe cambiare per consentire / disabilitano quello che vuoi.

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

Answer 2

Ero alla ricerca di una risposta che limitato di ingresso ai soli caratteri alfanumerici, ma ancora permesso per l'utilizzo dei caratteri di controllo (ad esempio, backspace, cancellare, tab) e copia + incolla. Nessuna delle risposte fornite che ho provato soddisfatti tutti questi requisiti, così mi si avvicinò con il seguente utilizzando l'evento input.

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

Modifica
Come rinogo sottolineato nei commenti, il frammento di codice sopra costringe il cursore alla fine dell'input durante la digitazione nel mezzo del testo di input. Credo che il frammento di codice di seguito risolve 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);
});

Answer 3

Risposta breve: impedire l'evento 'keypress':

$("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 al momento di scegliere una soluzione:

• testo incollato
• I caratteri di controllo come backspace o F5 possono essere prevenute con il codice di cui sopra.
• é, io, etc
• arabo o cinese ...
• Cross Browser Compatibility

Credo che questa zona è abbastanza complessa da giustificare utilizzando un plugin 3a parte. Ho provato molti dei plugin disponibili ma ha trovato alcuni problemi con ciascuno di loro, così sono andato avanti e ho scritto jquery.alphanum . Il codice è simile al seguente:

$("input").alphanum();

O per più capillare di controllo, aggiungere alcune impostazioni:

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

Speranza che aiuta.

Answer 4

Con attributo di input modello di HTML5!

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

Answer 5

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

Answer 6

Utilizza regex per consentire / non consentire qualsiasi cosa. Inoltre, per una versione leggermente più robusto la risposta accettata, permettendo ai personaggi che non hanno un valore di chiave ad essi associati (backspace, scheda, i tasti freccia, cancellare, ecc) può essere fatto da prima passare attraverso l'evento keypress e controllare la chiave sulla base di codice tasto posto del 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;
        }
});

Answer 7

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

Answer 8

scrivere del codice javascript evento onkeypress della casella di testo. secondo il requisito consentire e limitare carattere nella vostra 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;
}

Answer 9

Io uso questo codice modificando altri che ho visto. Solo grande alla scrittura utente se il tasto premuto o testo incollato supera il test pattern (match) (questo esempio è un metodo di scrittura 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
    }
})

Answer 10

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

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

});
});

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

Answer 11

Sì, è possibile farlo utilizzando 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 uno script per il 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 è riuscito.

---

È anche possibile farlo utilizzando 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)"/>

Answer 12

solo i numeri:

  

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

o per il tempo compreso ":"

  

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

tra cui anche eliminare e backspace:

  

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

unfortuneatly non riuscite a farla lavorare su un iMAC

Answer 13

voluto commentare il commento di Alex per la risposta di Dale. Non possibile (prima bisogno di quanta "REP"? Questo non succederà molto presto .. strano sistema.) Così come una risposta:

Backspace può essere aggiunto con l'aggiunta di \ b per la definizione regex in questo modo: [a-zA-Z0-9 \ b]. O si consente semplicemente l'intera gamma Latina, tra cui più o meno qualsiasi cosa caratteri "non esotiche" (controllano anche caratteri come backspace): ^ [\ u0000- \ u024F \ u20AC] + $

L'unico vero carattere unicode fuori latino c'è il segno di euro (20AC), aggiungere quello che potrebbe essere necessario altro.

Per gestire anche l'input immesso tramite copia & incolla, semplicemente si legano anche alla manifestazione "cambiamento" e controllare l'ingresso anche lì - l'eliminazione o striping è / dare un messaggio di errore del tipo "caratteri non supportati" ..

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

Answer 14

Limita le offerte speciali caratteri sulla pressione dei tasti. Ecco una pagina di prova 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 angolare, avevo bisogno di un formato valuta corretto 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();
}

Nel html aggiungere 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 nella corrispondente controllore angolare permetto lì solo essere solo 1 periodo, convertire il testo in numero e aggiungere il numero arrotondamento '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;
}

...

Answer 15

Per sostituire i caratteri speciali, spazi 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());
 }); 
});

Answer 16

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


    });]

Answer 17

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