Discussion :

[nadfri2019]

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.

[javatwister]

Bonjour,

disabled est ton ami.

[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.

[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.

[Beginner.]

Salut,

Ben tu pourrais traiter les événements claviers (onkeydown, onkeypress) et dans le gestionnaire tu annules le comportement par défaut...

[Beginner.]

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

[nadfri2019]

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

[javatwister]

Alors j'ai quelque chose qui semble fiable

Code html :

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

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 javascript :

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
// 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()
})

[nadfri2019]

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 :

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

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?

[javatwister]

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

[nadfri2019]

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

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
 
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;
}
 
};

[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:

[javatwister]

Pense aussi à redéfinir calculLine.selectionEnd en fin d'opération, pour conserver la place du curseur;

[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?

[javatwister]

1er cas: end = start -1;

2e cas: end=start;

[nadfri2019]

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 :

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
 
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();
		};
	}

[javatwister]

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 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
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>

[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.

[nadfri2019]

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 :

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
 
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();
		};

[danielhagnoul]

[...] 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 !