Discussion :

[yeste64]

Bonjour à tous. Je voudrais créer une regexp qui n'autorise que des lettres (min et maj) et des chiffres. J'ai fait ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var reg = new RegExp("^[a-zA-Z0-9]$", "gi");

Cependant, les caractères ^, ¨ et ` passent à travers (ce sont les seuls).

J'ai donc essayé ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var reg = new RegExp("^[a-zA-Z0-9][^\^\`\¨]$", "gi");

Mais maintenant tout ce que je teste renvoie false.


Merci d'avance de votre aide

[headmax]

Dans ton cas ta regexp test pour le cas d'un unique caractère, et non plusieurs.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
var reg = new RegExp("^[a-zA-Z0-9]+$", "gi");
var str="hello";
reg.test(str);

[yeste64]

Merci beaucoup pour la réponse.

J'ai essayé et ça ne marche toujours pas.
En fait, j'appelle cette RegExp à chaque saisie d'une touche dans le champ concerné, donc ce n'est pas ça le problème.

Les 3 caractères cités dans mon premier message passent toujours.

[headmax]

Essaye dans ce cas avec ta dernière regexp :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
var reg = new RegExp("^[a-zA-Z0-9][^\^\`\¨]+$", "gi");
var str = "hello";
reg.test(str);

Les deux propositions on été tester sous FF 14.0.1
Sous quel navigateur test tu ton script?

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var reg = new RegExp("^[a-zA-Z0-9]+$", "gi");

ne permet la saisie que des chiffres et des lettres

les guillemets quotes et circonflexe ne passent pas, les caractères accentués non plus.


Après tout dépend de la façon dont tu testes ???

[yeste64]

Les guillemets et quotent ne passent pas non. Ce sont seulement les 3 caractères que j'ai énoncé dans mon premier message : le tréma, le circonflexe, et l'accent grave.

Pour tester, j'ai mis un "keypress" sur mon input. Et à chaque fois, je teste la valeur de la touche appuyée. Toutes les touches sont bien filtrées mis à part ces 3 là ..

Voilà mon bout de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
//Saisie du nom d'utilisateur
$('#boxInscription .nomUtilisateur').keypress(function(e){
	var touche= String.fromCharCode(e.keyCode);
	var reg = new RegExp("^[a-zA-Z0-9]$", "gi");
	return reg.test(touche);
});

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var reg = /[a-z0-9]/gi;
alert(reg.test('^'))
alert(reg.test('~'))
alert(reg.test('`'))

[yeste64]

Je viens de mettre des alert comme tu le fais, et le résultat est bizarre :
Quand je saisis une touche, ça alert bien la touche saisie. Mais quand je saisis une des trois touches concernée, aucun alert. Le keypress ne les détecte pas j'ai l'impression.


Ce sont des touches spéciales qui attendent une seconde touche pour finalement former le caractère finale (comme ò ou ê par exemple), serait-ce pour ça que le keypress ne les relève pas ?

[SpaceFrog]

a savoir que ces caractères sont issus de touches multiples ...
le keypress n'est donc pas le bon evenement
=> keyup

[yeste64]

Le keyup ne filtre plus aucune lettre. En effet, la lettre est déjà dans le input quand la fonction de vérification est exécutée. Comment faire ceci ?

[kimjoa]

Je crois qu'il faut tester dans l'event de ton keypress, si ctrl ou alt, ou altgr, sont enfoncé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var shift = event.shiftKey;
var alt = event.altKey;
var ctrl = event.ctrlKey;
var which = event.which;

[yeste64]

Ce que tu dis ne fonctionne pas pour tous les claviers si ?

Par exemple, étant sous mac, je n'ai pas de touche comme celles que tu cites à appuyer pour saisir un accent circonflexe, un tréma, ou un accent grave. Ce sont des touches à accès direct, sans combinaison.

[kimjoa]

J'en ai aucune idée, j'ai pas de mac, mais peut être qu'en interne, les caractères spéciaux sont traité comme une combinaison. Sinon, et bien, va falloir contourner le problème via keyup... je vois pas d'autre alternative

[Didi49]

Ce serait pas possible de changer d'évènement?
par exemple sur un onChange de tes champs et tu récupères la dernière lettre saisie. Ca évite les problèmes de compatibilité des claviers.
A moins qu'il y est du traitement lancé dès l'appuie d'une touche, je pense qu'il est préférable de laisser l'utilisateur marquer ce qu'il souhaite et le filtrer après.

[yeste64]

je pense qu'il est préférable de laisser l'utilisateur marquer ce qu'il souhaite et le filtrer après.

Si tu affiche un retour visuel à la saisie de la touche non autorisée, cela ne pose aucun problème.

Bon, après des heures (looooooooongues heures) de recherche et de travail sur le sujet, voici la solution :

- un keydown empêchant les touches accent circonflexe, trema et grave (elles ont le même keyCode et ne sont détectés qu'au keydown) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$('#boxInscription .nomUtilisateur').keydown(function(e){
	if(e.keyCode == 229){
		return false;
	}
});

- un keypress vérifiant la regexp :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$('#boxInscription .nomUtilisateur').keypress(function(e){
	var touche= String.fromCharCode(e.keyCode);
	var reg = new RegExp("^[a-zA-Z0-9]$", "gi");
	return reg.test(touche);
});

Car il faut aussi savoir que les évènements keydown, keypress et keyup ne renvoient pas les mêmes keyCode...

Voilà. Ne surtout pas oublier de vérifier les valeurs par la suite en PHP car malgrès toutes ces restrictions, le copier-coller reste possible. Il serait possible de l'éviter, mais j'estime que le rapport "lourdeur du code" / "probabilité de tentative de copier-coller" est bien trop faible pour mettre la chose en place, étant donné que le php tourne quand même derrière tout ça au final.

Voilà, j'espère que ça pourra en aider d'autres. Merci à tout ce qui ont participé au topic et à bientôt

[Watilin]

Excellent feedback ! Si tous les demandeurs d'aide étaient comme toi, le monde serait plus beau :')

Cela dit, tu pouvais peaufiner encore ton code. Il faut savoir que keypress est lié au caractère, c'est-à-dire le résultat final du processus de frappe au clavier ; tadis que keydown et keyup sont directement liés à la touche clavier elle-même. C'est pourquoi il est possible d’utiliser e.charCode avec keypress, alors qu’on utilise de préférence e.keyCode avec keydown et keyup.

Ainsi, l’appui sur les touches ^ puis e pour donner le caractère « ê », déclenchera 2 keyup et 2 keydown, mais 1 seul keypress. Le charcode du keypress sera 234. C’est là que se trouve ton erreur : tu utilises keyCode au lieu de charCode.

À noter que les touches ayant un effet direct mais n’imprimant pas de caractère (flèches, tab, suppr, entrée, etc.) déclenchent un keypress mais on un charCode égal à 0. Il vaut mieux ne pas les désactiver.

Ce sont des touches spéciales qui attendent une seconde touche pour finalement former le caractère finale (comme ò ou ê par exemple)

On appelle ça des touches mortes. Elles ne déclenchent pas de keypress !

Voici un exemple complet :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang=fr>
<head>
	<meta charset=utf-8>
	<title>Touches mortes et évènements clavier</title>
</head>
<body>
 
<input id=input type=text />
<pre id=log></pre>
 
<script>
 
var $input = document.getElementById("input"),
        $log = document.getElementById("log");
 
function log( text, correctness ){
        var $span = document.createElement("span");
        $span.style.color = correctness ? "green" : "red";
        $span.appendChild(document.createTextNode(text + "\n"));
        $log.appendChild($span);
}
 
$input.onkeypress = function( event ){
        var char = String.fromCharCode(event.charCode);
        var ok = /^[\w\d]+$/gi.test(char);
        if (event.charCode) {
                log(char + "(" + event.charCode + ")", ok);
                if (!ok)
                        event.preventDefault();
        }
}
 
$input.value = "";
$input.focus();
 
</script>
</body>
</html>

[yeste64]

Merci pour ta réponse.

Je comprends ce que tu expliques, mais un problème persiste avec ta solution : l'appui successif de touches mortes. Si j'utilise ta méthode, l'utilisateur pourra entrer, par exemple, plusieurs accents graves d'affilé sans soucis, alors qu'avec mon keydown, il ne pourra pas. Mais je me pose encore une question : est-ce que le keyCode (229) que je teste au keydown pour exclure les accents ¨, ^ et ` est le même sur tous les OS (Windows et Linux ? Car je suis actuellement sous Mac) ?

EDIT : Je viens de tester ton code, et l'appui d'une touche morte comme l'accent grave puis du o par exemple, ne me déclenche aucun keypress..

[Watilin]

Mea culpa, j'ai parlé trop vite, je n'ai testé mon code que sous Firefox. Il se trouve que la distinction keyCode / charCode n'est pas faite par tout le monde, notamment pas par Opera (étonnant ) ni IE (beaucoup moins ). Chez ces deux derniers, pas de charCode, l'information est portée par keyCode quel que soit l'évènement.

Cela dit, j'ai vu que tu utilisais jQuery, ce qui te met à l'abri de ces ennuyeux problèmes de compatibilité. Tu peux utiliser event.which

Voici la version jQuery de mon code précédent :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang=fr>
<head>
	<meta charset=utf-8>
	<title>Touches mortes et évènements clavier</title>
	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
 
<input id=input type=text />
<pre id=log></pre>
 
<script>
 
function log( text, correctness ){
        var $span = $("<span>");
        $span.css({ "color": correctness ? "green" : "red" });
        $span.text(text + "\n");
        $("#log").append($span);
}
 
$("#input").keypress(function( event ){
        var char = String.fromCharCode(event.which);
        var ok = (8 == event.which) || /^[\w\d]$/gi.test(char);
        // 8 = retour arrière
        if (event.which) {
                log(char + "(" + event.which + ")", ok);
                if (!ok)
                        event.preventDefault();
        }
}).val("").focus();
 
</script>
</body>
</html>

J'ai dû modifier le test pour prendre en compte la touche retour arrière (code 8) qui est considérée comme un caractère imprimable par Firefox et Opera – je pense qu'il serait très agaçant pour l'utilisateur de ne pas pouvoir corriger ses fautes de frappe. J'ai testé également sous Chrome, Safari/Win et IE8, qui se sont montrés très obéissants

Pour ta question à propos des keyCode, je pense qu'ils sont normalisés, mais je ne suis pas sûr à 100%. Il y a un moyen simple de vérifier en ouvrant une console et en tapant ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.addEventListener("keyup", function( event ){ console.log(event.keyCode); }, false)

Cependant, certaines touches seront difficiles à vérifier car elles peuvent être interceptées par l'OS (touche meta sous Windows) ou par le navigateur (touche F1 sous Opera) avant d'arriver au document.

[yeste64]

Je réitère ma réponse, le keypress n'est pas déclenché après l'appui d'un accent grave et d'un o par exemple, ou d'un autre accent et d'une autre lettre.

Je suis sous Chrome Mac, je ne sais pas, peut être que chez toi, cela marche, mais pas chez moi.

De plus, le underscore passe à travers

[Watilin]

On va y arriver

Pour l'underscore, il suffit de modifier la regexp : /^[a-z\d]$/gi
Ton souci de keypress m'inquiète davantage. Essaye de tester sous un maximum de navigateurs pour voir l'étendue du problème. Jusqu'à preuve du contraire, « ò » est un caractère, et tous les navigateurs devraient déclencher un keypress, ce qui me donne envie de dire que Chrome/Mac est défaillant. S'il faut utiliser keydown, soit, mais ça va être moche…