Désactiver la saisie clavier d'une TEXTAREA

Version imprimable

07/01/2020, 15h38
nadfri2019

Désactiver la saisie clavier d'une TEXTAREA

Bonjour,

Je suis entrain de développer une calculatrice en HTML/JS et je suis confronté a un petit problème.

Afin d'eviter de rendre trop compliqué le programme, j'ai fais mon propre clavier en HTML/CSS (1234567890 . /*-+=)
Ceci pour éviter d'utiliser le clavier du PC ou celui du mobile afin de limiter de mettre n'importe quelle caractère.

Néanmoins, ceci n'est pas pratique quand on veut modifier la saisie en cas de faute.

Donc je voudrais qu'on puisse mettre le curseur là ou on souhaite mais que les modifications ne se fasse que via mon clavier.

Les entrées se font actuellement via un textaera, mais si je fais un "readonly", on ne peut pas afficher le curseur.

Avez vous une idée simple qui permette de désactiver totalement la saisie au clavier sur PC comme sur Mobile sans affecter la position du curseur de la souris ou du doigt sur le texte?

Cdt.
07/01/2020, 15h50
javatwister

Bonjour,

disabled est ton ami.
07/01/2020, 15h55
nadfri2019

Le probleme avec disabled c'est que le curseur est lui aussi desactivé :(.

Je voudrais qu'il reste actif (entrain de clignoter) sans pour tant qu'on puisse utiliser le clavier.

Afin d'etre obligé d'utiliser le clavier de l'application.
07/01/2020, 16h35
javatwister

Le contrôle total restera difficile;
Il vaut mieux contrôler (regexp, isNaN, étude de chaînes acceptables ou pas...) les saisies clavier plutôt que d'avoir à ajouter sans cesse des options nouvelles à ton clavier. L'utilisateur te remerciera.
07/01/2020, 16h50
Beginner.

Salut,

Ben tu pourrais traiter les événements claviers (onkeydown, onkeypress) et dans le gestionnaire tu annules le comportement par défaut...
07/01/2020, 17h17
Beginner.

Tiens je te met un exemple simple que tu peux tester ici : https://jsbin.com/suhoyuqixa/edit?ht...console,output
07/01/2020, 17h25
nadfri2019

C'est une bonne idée!, ça me permet bien de garder le curseur, parcontre sur mobile quel est l'équivalent? (touch?)

Alors j'ai quelque chose qui semble fiable

Code:

1
2
3
4
<form>
	<textarea id="t"></textarea>
	<input id="b" type="button" value="Ecrire " /> 
</form>

(le bouton "écrire" ajoute un chiffre aléatoire)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// clavier et collage sont inhibés
document.getElementById("t").addEventListener("keydown",function(e){
	e.preventDefault()},{passive:false})
document.getElementById("t").addEventListener("paste",function(e){
	e.preventDefault()},{passive:false})
 
// Un clic sur le bouton (imaginons que ce soit ta calculatrice):
// - ajoute du texte à l'endroit où se trouve ton curseur
// - donne le focus à la zone de texte
// - remplace le texte sélectionné, quand c'est le cas
// - replace le curseur à la fin de l'ajout (ou, pourquoi pas, du retrait, avec ta calculatrice)
document.getElementById("b").addEventListener("click",function(e){
	document.getElementById("t").setRangeText(Math.floor(Math.random()*10),
	document.getElementById("t").selectionStart,
	document.getElementById("t").selectionEnd,
	"end");
	document.getElementById("t").focus()
})

Ca fait 3h que je suis dessus, en travaillant justement sur ces fameux parametres selectionStart et selectionEnd!
Parcontre, je ne connaissais pas "setRangeText", ton programme semble beaucoup plus court que le mien :)!
Code:

1 2 3 4 5 6 7 8 9 10 11 12 element.onclick = () => //element est le bouton cliqué sur ma page { let text = calculLine.value; //(calculLine est mon textaera) let start = calculLine.selectionStart; let end = calculLine.selectionEnd; let key = "+" // valeur de la touche + sur mon clavier if (end-start >= 0) calculLine.value=text.slice(0,start) + key + text.slice(end); // remplace la selection par key else calculLine.value+= key; //ou rajoute cette valeur à la fin du texte };
Parcontre, on fait comment sur mobile? ca peut marcher avec touchstart et touchend?

07/01/2020, 20h28
javatwister

C'est probable. Le "clic" est plutôt bien perçu par les portables même sans adaptation;

Il n'y a pas une solution pour effacer? pour le moment j'utilise un switch mais je trouve cela lourd

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
del.onclick = () =>{ 
let text = calculLine.value;
let start = calculLine.selectionStart;
let end = calculLine.selectionEnd;
 
switch (true) {
	case (end-start == 0):
		calculLine.value=text.slice(0,start-1) + text.slice(end); //del value before cursor
		break;
	case (end-start > 0):
		calculLine.value = text.slice(0,start) + text.slice(end); //del selection
		break;
	default:
	        calculLine.value=text.slice(0,-1); //del last value
		break;
}
 
};

07/01/2020, 22h29
javatwister

Ben écoute, toutes les fonctions de découpe sont bonnes à prendre là; ça va te causer pas mal de maux de tête mais si c'est fonctionnel, ça te laisse du temps pour trouver mieux quand tu auras le temps:
07/01/2020, 23h04
javatwister

Pense aussi à redéfinir calculLine.selectionEnd en fin d'opération, pour conserver la place du curseur;
08/01/2020, 17h06
nadfri2019

En effet, je n'arrive pas à garder la position du curseur avec ma fonction delete(). La seule chose qui semble fonctionner c'est d'avoir le focus à la fin, alors que qu'avec setRangeText, il n'y a pas ce problème.

Une idée?
08/01/2020, 18h20
javatwister

1er cas: end = start -1;

2e cas: end=start;

Merci javatwister, ca marche en effet, mais j'ai du mettre
"calculLine.selectionEnd" aulieu de "end"
Sinon ca marchait pas, ce genre debug arrive souvent, y a t il une raison qui empeche d'utiliser la variable quand celle ci designe un element HTML?

Code:

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
 
delete()
	{
         element.onclick = () =>
	   {
	     let text  = calculLine.value;
             let start = calculLine.selectionStart;
             let end   = calculLine.selectionEnd;
 
	     switch (true) 
	     {
	        case (end == start):
		   calculLine.value=text.slice(0,start-1) + text.slice(end); //del value before cursor
		   calculLine.selectionEnd = start -1; // keep focus in position
		   break;
		case (end-start > 0):
		   calculLine.value = text.slice(0,start) + text.slice(end); //del selection
		   calculLine.selectionEnd = start; //keep focus in position
		   break;
	       default:
		   calculLine.value=text.slice(0,-1); //del last value
		   break; 
			}
		calculLine.focus();
		};
	}

Pour le problème de "end" peut venir d'un changement de valeur durant l'événement...

De toute façon, tu es parti sur un plan "bidouille" (rigolo au début mais vite rebutant tellement la gestion des sélections de texte est variable et fastidieuse).

Juste pour rire, petit travail d'autrefois:

Code:

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
40
41
42
43
44
 
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>calculer sans souci...</title>
<style>
div{margin:50px;}
</style>
<script>
window.addEventListener("load",()=>{
        document.getElementById('calc').addEventListener("change",(e)=>{
                let n=e.target.value;
                n=n.replace(/,/g,'.'); 
                n=n.replace(/x/gi,'*'); 
                n=n.replace(/:/g,'/'); 
                try{
                        n=eval(n.toUpperCase());
                        n=String(n).search(/\./)!=-1 ? n.toFixed(2) : n
                }
                catch(e){
                        console.log(e)
                };
                document.getElementById('res').value=!isNaN(n)? n :"erreur";
        },false);
},false);
</script>
</head>
<body>
<div>
Une manière simple d'effectuer des calculs sans avoir à multiplier les champs,
et sans risque de bugs.<br />
Les résultats sont arrondis au centième.<br />
Toute fonction javascript saisie est considérée comme une erreur.
</div>
<div>
<label for="calc">Entrez une instruction mathématique puis quittez la zone</label>
<input id="calc" type="text" />
<p>
<span>Résultat </span>
<input id="res" type="text" />
</p>
</div>
</body>
</html>

08/01/2020, 19h45
nadfri2019

C'est vrai que je patoge avec ces "slice" et "start", bug de la journée: quand start vaut "0", ca m'affiche des choses bizarre dans le textaera :(.

Parcontre, il est bien ton petit programme, pas beaucoup de lignes et plutôt efficace, je vais m'insiperer de quelques petits trucs pour la suite:).

Je pense avoir simplifié le code et m’être débarrasser des bugs de la fonction delete(). Pour rappel, elle permet d'effacer un texte sélectionné ou bien le caractère précédent le curseur de position via un onclick sur un element HTML sans passer par le clavier.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
element.onclick = () =>
		{
			let text  = calculLine.value; //calculLine represente un <textaera>
			let start = calculLine.selectionStart;
			let end   = calculLine.selectionEnd;
 
			if(start-end == 0 && start != 0)
			{
				calculLine.value=text.slice(0,start-1) + text.slice(end); //del value before cursor
				calculLine.selectionEnd = start-1; //keep focus in start-1 position
			}
 
			else
			{
				calculLine.value = text.slice(0,start) + text.slice(end); //del selection
				calculLine.selectionEnd = start; //keep focus in start position
			}
 
			calculLine.focus();
		};

09/01/2020, 11h28
danielhagnoul

Citation:

Envoyé par nadfri2019

[...] Avez vous une idée simple qui permette de désactiver totalement la saisie au clavier sur PC comme sur Mobile sans affecter la position du curseur de la souris ou du doigt sur le texte?

Cdt.

Désactiver oui, mais pour le respect des autres conditions il faut tester.
Voir Web, on peut bloquer les actions de l'utilisateur !