Discussion :

[tintin72]

Bonjour,

Je voudrais savoir comment faire pour désactiver la touche
Backspace mais seulement lorsque celle-ci reste enfoncée.
J'ai trouvé ce tuto:

http://unixpapa.com/js/key.html

où il est expliqué que lorsqu'une touche reste enfoncée ça génère
un auto-repeat.
Malheureusement je n'arrive pas à trouver comment faire pour détecter
cet auto-repeat, d'autant plus que ça varie selon les browser (je suis sous Firefox/Linux).

Quelqu'un pourrait m'aider ?

Merci.

[FMaz]

En somme, tu as un champ texte, et tu veux qu'il soit possible d'effacer au maximum 1 caractère par seconde par exemple ?


... parfois j'en viens vraiment à me demander quel genre d'interfaces de tordus vous faite subir à vos visiteurs ( Mais bon, je présume que tu dois être dans un cas très particulier, du genre un jeu en online utilisant des combinaisons de touches )

L'idée c'est de faire un évènement onmousedown, qui va comparer le temps actuel à celui de la dernière touche appuyée qui se trouve dans une variable.

Si le temps est inférieur à X ms, faire l'action, sinon, return false;


Tu peux aussi coupler le tout avec onmouseup, afin que onmouseup ré-initialise une variable qui s'occupe de gérer si la touche à déjà été pressée ou pas.

[SpaceFrog]

intercepte le keycode 8 sur le keypress

[tintin72]

En somme, tu as un champ texte, et tu veux qu'il soit possible d'effacer au maximum 1 caractère par seconde par exemple ?

Oui en gros c'est ça.

intercepte le keycode 8 sur le keypress

C'est déjà fait mais lorsque je reste appuyé sur la touche trop longtemps, le backspace fonctionne. Ou alors je neutralise complètement le backspace mais
c'est pas top.
En fait ce qui complique encore les choses c'est que je developpe ça en tant que plugin pour CKeditor (editeur wysiwyg) et je dois utiliser l'API qui va avec.
L'idée du onmousedown est intéressante mais ça risque d'être coton à implémenter.
N'y a t-il pas un autre moyen ?

[thelvin]

>En somme, tu as un champ texte, et tu veux qu'il soit possible d'effacer au maximum 1 caractère par seconde par exemple ?

Oui en gros c'est ça.

Ouais ben il faut pas. L'utilisateur devrait effacer ses caractères à la vitesse où il a l'habitude de le faire. En fait, sur cette question-là il ne faut rien faire du tout, c'est très bien tel que.

L'idée du onmousedown est intéressante mais ça risque d'être coton à implémenter.
N'y a t-il pas un autre moyen ?

onkeydown, je pense. Il faudrait que je vérifie, mais je ne suis pas sûr qu'un timer soit nécessaire. Écouter onkeydown et onkeyup sur le backspace, et ne laisser passer qu'un seul onkeypress entre les deux, devrait suffire.
C'est un peu compliqué à gérer, mais JavaScript est suffisamment puissant pour ça.
Je suis une tanche en JavaScript donc je ne sais pas s'il y a plus simple, mais j'en doute : JavaScript est un langage utilisé pour manipuler des pages web, pas pour faire des GUIs.

[tintin72]

Écouter onkeydown et onkeyup sur le backspace, et ne laisser passer qu'un seul onkeypress entre les deux, devrait suffire.

Oui c'est une bonne idée mais comment faire ça ?
Sans compter que onkeypress réagit aussi à l'appuie d'une touche (comme
onkeydown) donc bonjour le bazard (ils auraient pas pu faire un event onkeyhold ? ).

Bref, pour l'instant j'en suis là:

Code :

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
function stop(ev)
{
  ev.preventDefault();
}
 
function detectKey(event) { 
 
    switch(event.keyCode)
    {
      case 8:
 
	setTimeout(function(){stop(event)}, 200);
      break;
    }
} 
 
var textarea = document.getElementById('text'); 
textarea.addEventListener("keypress", detectKey, false);

Je pensais que ev.preventDefault(); bloquerait le keypress mais non.
Quelqu'un aurait une idée ?

[thelvin]

Oui c'est une bonne idée mais comment faire ça ?

Ben, en JavaScript. C'est parti !

Sans compter que onkeypress réagit aussi à l'appuie d'une touche (comme
onkeydown) donc bonjour le bazard

Ah. Euh. Bon, alors écouter onkeypress et onkeydown pour le début, et n'en laisser passer qu'un de chaque avant de voir passer onkeyup.

(ils auraient pas pu faire un event onkeyhold ? ).

Ils auraient pu, mais pour l'instant c'est pas fait, et de manière générale le JavaScript des navigateurs n'est pas fait pour de la UI.

Je pensais que ev.preventDefault(); bloquerait le keypress mais non.
Quelqu'un aurait une idée ?

Je ne comprends pas ce que tu essaies d'obtenir en stoppant un event 200 millisecondes après qu'il ait été entièrement traité et n'intéresse plus qui que ce soit ?

[tintin72]

Ah. Euh. Bon, alors écouter onkeypress et onkeydown pour le début, et n'en laisser passer qu'un de chaque avant de voir passer onkeyup.

Oui mais comment on fait pour ne laisser passer qu'un keypress/keydown ?
Les variables static n'existent pas en JS et je suis pas sûr que ça soit la solution.

Je ne comprends pas ce que tu essaies d'obtenir en stoppant un event 200 millisecondes après qu'il ait été entièrement traité et n'intéresse plus qui que ce soit ?

Désolé, moi aussi je suis une tanche en JS mais en gros l'idée c'était que
lorsque la touche backspace reste appuyée plus de 200 ms, on appelle la fonction stop() en lui passant l'objet event pour qu'elle puisse bloquer la touche avec la methode preventDefault().
Mais bon, j'ai sûrement dû rater quelque chose.

Si quelqu'un pouvait m'éclairer.

[FMaz]

Et bien pour le truc des 200ms, suffit de faire lancer une instance de timer sur le onkeypress avec un interval de 200ms.

Si le onkeyup est apellé avant l'exécution du timer, supprimer le timer.

[Bovino]

Une fonction stop()
Autant déclarer une variable window tant qu'à faire...

Je pense que le plus simple (sic ) serait de passer par un flag (un booléen) que tu mets à true au keydown de la touche backspace et à false au keyup.
Il me semble (à vérifier quand même) que l'appui prolongé d'une touche relance le keydown, donc au déclenchement du keydown, tu testes la valeur du flag et la touche pressée, si les deux sont true, tu inhibe l'appui.

[FMaz]

Vrai, sauf que quelqu'un a parlé de seulement lancer l'action dans le cas ou la touche était "onHold", donc on doit attendre les 200ms pour s'assurer que la touche est maintenue, et non pas seulement appuyée et relachée.

[Bovino]

Oui, c'est pour ça que tu initialises le flag. Si la touche vient d'être enfoncée (keydown) le flag passe à true, lorsque la touche est relâchée (keyup), le flag est mis à false.
Entre les deux, tu continues à détecter le keydown, s'il est déclenché et que le flag est à true, c'est que tu es sur un cas de "onhold"

[FMaz]

Brilliant !

Je n'y avais simplement pas pensé. En plus ca respecte le paramètre de répétition des touches du système de l'utilisateur

[tintin72]

J'ai finalement trouvé une solution acceptable pour mon appli.
Tant que le user utilise le backspace au coup par coup pas de problème,
mais s'il reste appuyé + de 200ms une boite de dialogue apparaît et bloque la touche.

Code :

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
var timer;
 
function stop()
{
  alert("Doucement sur le backspace ;-)");
}
 
function keyUp(event)
{
    switch(event.keyCode)
    {
      case 8:
	clearTimeout(timer);
	break;
    }
}
 
function keyPress(event) { 
 
    switch(event.keyCode)
    {
      case 8:
	timer = setTimeout(function(){stop()}, 200);
      break;
    }
} 
 
var textarea = document.getElementById('text'); 
textarea.addEventListener("keypress", keyPress, false);
textarea.addEventListener("keyup", keyUp, false);

Mais je suis pas sûr pour la variable globale timer, c'est pas très élégant.
Y aurait-il une autre manière de passer l'instance du timer ?

[FMaz]

Tel un enfoiré de première, je vole la solution de Bovino, et j'en retire la gloire !

Code :

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
 
var pressed;
 
function stop()
{
  alert("Doucement sur le backspace ;-)");
}
 
function keyUp(event)
{
    if(event.keyCode == 8)
        pressed = false;
}
 
function keyPress(event)
{ 
    if(event.keyCode == 8)
        if(pressed===true)
            stop();
        else
            pressed = true;
} 
 
var textarea = document.getElementById('text'); 
textarea.addEventListener("keypress", keyPress, false);
textarea.addEventListener("keyup", keyUp, false);

Edit:
avoir "stop" comme nom de fonction me parrait une mauvaise idée. Ca doit certainement être un nom réservé...

[tintin72]

avoir "stop" comme nom de fonction me parrait une mauvaise idée. Ca doit certainement être un nom réservé...

Oui, bien vu en effet. (Je l'ai renommé "stopBackspace" ...moins risqué).

Sinon pour la variable globale y a une autre solution ou on peut laisser comme ça ?