Comment empêcher la saisie de caractères spéciaux dans un champ de saisie avec jquery?
Comment empêcher la saisie de caractères spéciaux dans un champ de saisie avec jquery?
Réponses:
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;
}
});
Je cherchais une réponse qui restreignait la saisie aux seuls caractères alphanumériques, mais autorisait 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, j'ai donc proposé ce qui suit en utilisant l' input
événement.
$('input').on('input', function() {
$(this).val($(this).val().replace(/[^a-z0-9]/gi, ''));
});
Edit:
Comme Rinogo l'a souligné dans les commentaires, l'extrait de code ci-dessus force le curseur à la fin de l'entrée lors de la saisie au milieu du texte d'entrée. Je pense 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);
});
event.which
ou event.keycode
! J'aimerais pouvoir +10!
Réponse courte: évitez l'événement 'keypress':
$("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 comme jquery.alphanum
Il y a plusieurs choses à considérer lors du choix d'une solution:
Je pense que ce domaine est suffisamment complexe pour justifier l'utilisation d'un plugin tiers. J'ai essayé plusieurs des plugins disponibles mais j'ai trouvé des problèmes avec chacun d'eux, alors j'ai continué et j'ai écrit 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.
allow
paramètre. Mais c'est la beauté des plugins jquery, le fait que vous puissiez les modifier en fonction de vos besoins. Merci!
allow
option et cela a fonctionné bien pour moi en utilisant ce code: $('#firstName').alphanum({allow: "/"});
Avez-vous une chance de fournir plus d'informations? S'il y a un bogue ou un problème avec la documentation, ce serait bien de le faire réparer. Cheers
allowOtherCharSets: false
et allowCaseless: false
. Ceux-ci ont interféré avec les paramètres définis dans allow
. De mon point de vue, je pense que l' allow
option devrait opposer son veto à toutes les autres options (comme allowOtherCharSets
ou allowCaseless
). Donc, si vous spécifiez un caractère dans l' allow
option, il doit être autorisé quelles que soient les autres options définies dans l'objet de configuration. Il en va de même disallow
. Mais ce n'est que mon avis. :) Bravo encore! :)
Utilisez l'attribut d'entrée de modèle de HTML5!
<input type="text" pattern="^[a-zA-Z0-9]+$" />
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);
}
Utilisez regex pour autoriser / interdire quoi que ce soit. Aussi, pour une version légèrement plus robuste que la réponse acceptée, autoriser les caractères sans valeur de clé associée (retour arrière, tabulation, touches fléchées, suppression, etc.) peut être effectué en passant d'abord par l'événement keypress et 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;
}
});
Jetez un œil au 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'});
Écrivez du code javascript sur l'événement onkeypress de la zone de texte. selon l'exigence autoriser et restreindre le caractère dans votre 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;
}
J'utilise ce code en modifiant les autres que j'ai vus. Seulement grand à l'écriture de l'utilisateur si la touche enfoncée ou le texte collé réussit le test de modèle (correspondance) (cet exemple est une entrée de texte qui n'autorise 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
}
})
!e.charCode ? e.which : e.charCode
et pas simplement e.charCode ? e.charCode : e.which
?
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;
});
});
référence des codes clés ici:
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, '');
}
});
});
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 de 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 pour / et \ mais je n'ai pas réussi.
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)"/>
juste les chiffres:
$ ('input.time'). keydown (function (e) {if (e.keyCode> = 48 && e.keyCode <= 57) {return true;} else {return false;}});
ou pour le temps comprenant ":"
$ ('input.time'). keydown (function (e) {if (e.keyCode> = 48 && e.keyCode <= 58) {return true;} else {return false;}});
y compris également la suppression et le retour arrière:
$ ('input.time'). keydown (function (e) {if ((e.keyCode> = 46 && e.keyCode <= 58) || e.keyCode == 8) {return true;} else {return faux; } });
malheureusement ne pas le faire fonctionner sur un iMAC
Je voulais commenter le commentaire d'Alex à la réponse de Dale. Pas possible (il faut d'abord combien de "rep"? Cela n'arrivera pas très vite .. système étrange.) Donc, comme réponse:
Le retour arrière peut être ajouté en ajoutant \ b à la définition de l'expression régulière comme ceci: [a-zA-Z0-9 \ b]. Ou vous autorisez simplement toute la plage latine, y compris plus ou moins tout caractère "non exotique" (contrôle également les caractères comme le retour arrière): ^ [\ u0000- \ u024F \ u20AC] + $
Seul le vrai caractère unicode en dehors du latin, il y a le signe euro (20ac), ajoutez tout ce dont vous pourriez avoir besoin.
Pour gérer également les entrées saisies par copier-coller, il vous suffit de vous lier à l'événement "change" et de vérifier également l'entrée - en la supprimant ou en la 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;
}
Restreindre les caractères spéciaux en appuyant sur une touche. Voici une page de 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();
}
});
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 n'autorise qu'une seule période, je convertis le texte en nombre et j'ajoute l'arrondi des nombres 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;
}
...
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());
});
});
[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();
}
}
}
});]
Autoriser uniquement les nombres dans TextBox (restreindre les alphabets et les caractères spéciaux)
/*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;
}