Come faccio a bloccare la digitazione di caratteri speciali in un campo di input con jquery?
Come faccio a bloccare la digitazione di caratteri speciali in un campo di input con jquery?
Risposte:
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;
}
});
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' input
evento.
$('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);
});
event.which
o event.keycode
! Vorrei poter +10!
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:
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.
allow
nell'impostazione. Ma questo è il bello dei plugin jquery, il fatto che puoi modificarli in base alle tue esigenze. Grazie!
allow
opzione 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
allowOtherCharSets: false
e allowCaseless: false
. Questi hanno interferito con le impostazioni impostate in allow
. Dal mio punto di vista, penso che l' allow
opzione dovrebbe porre il veto su tutte le altre opzioni (come allowOtherCharSets
o allowCaseless
). Quindi, se si specifica un carattere allow
nell'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! :)
Usa l'attributo di input del pattern di HTML5!
<input type="text" pattern="^[a-zA-Z0-9]+$" />
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);
}
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;
}
});
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'});
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;
}
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
}
})
!e.charCode ? e.which : e.charCode
e non semplicemente e.charCode ? e.charCode : e.which
?
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
$(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, '');
}
});
});
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)"/>
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
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;
}
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;
}
...
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());
});
});
[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();
}
}
}
});]
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;
}
/**
* 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;
}