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?

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