modification valeur d'un input text et position du curseur

Version imprimable

22/01/2009, 11h21
superpigeon

modification valeur d'un input text et position du curseur
Bonjour,
Je travaille essentiellement sous Firefox.
J'ai une fonction, très simple qui transforme le contenu d'un input en majuscules :
Code:

1 2 3 4 5 //à utiliser avec onkeyup = "auto_format_majuscules(this);" dans l'input text désiré function auto_format_majuscules(input){ input.value = input.value.toUpperCase(); }
Le problème est que lorsque je l'utilise sur un input de type text et que la taille du texte dépasse la taille du champs, seul le début du texte est visible.
Par contre le curseur lui est à la fin du champs.
Du coup, on ne voit pas ce que l'on écrit.

J'espère être clair dans mes explications.
Merci d'avance !
22/01/2009, 12h27
Borowsky

Bizzare... normalement le texte avance avec le curseur... ta fonction n'a rien a voir la dedans je pense... ta essayé sans cette fonction ? et tu l'appelle quand cette fonction ? A chaque lettre ajouter dans le input ?

je l'appelle onkeyup sur l'input.

J'ai fait un petit fichier d'exemple :

bug_majuscules.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
	<head>
		<title>Problème auto_format_majuscules</title>
		<script type='text/javascript'>
		//à utiliser avec onkeyup = "auto_format_majuscules(this);" dans l'input text désiré
		function auto_format_majuscules(input){
			input.value = input.value.toUpperCase();
		}
		</script>
	</head>
	<body>
		Test : 
		<input type='text' onkeyup="auto_format_majuscules(this)" />
		<br />
		(écrivez une longue phrase pour constater le bug)
	</body>
</html>

22/01/2009, 12h51
franculo_caoulene

Salut,

Teste la valeur de la touche appuyée (event.keyCode). Apparemment tu ne veux pas agir sur les flèches, par exemple.
Un exemple pour t'inspirer trouvé vite fait : http://www.developpez.net/forums/d26...rn-javascript/

edit: quoique je ne suis même pas sûr!
22/01/2009, 12h57
superpigeon

@franculo_caoulene:
Pourquoi devrais-je regarder quelle touche l'utilisateur a pressé ?
Je ne veux que mettre en majuscule le texte saisi.
Après, s'il y a des chiffres dans le champs, ils peuvent rester.

Mais en soit, la fonction fonctionne (quel beau pléonasme).
Le problème est bien visible sur le fichier d'exemple que j'ai mis en CODE précédemment.
22/01/2009, 13h01
franculo_caoulene

C'est vrai je dis de grosses bêtises ces jours-ci. Je vais me prendre des vacances de forum.
22/01/2009, 13h39
Borowsky

Tu n'as pas répondu a ma question, si tu enlève cette fonction et que tu écris dans le champ, le curseur et le texte se déplace normalement ? (je suppose que oui mais bon...)
22/01/2009, 13h41
superpigeon

@borowski:
Oui oui, bien sûr, ce qu'on voit dans le champs suit le curseur normalement si je ne mets pas ma fonction.

Juste pour voir, ta essayé de faire ceci dans ta fonction :
Code:

1 2 3 4 5 function auto_format_majuscules(input){ input.value = input.value.toUpperCase(); input.blur(); input.focus(); }
ou dans ce sens la :
Code:

1 2 3 4 5 function auto_format_majuscules(input){ input.blur(); input.value = input.value.toUpperCase(); input.focus(); }
EDIT : Ah nan c'est peut-etre con ce que je dis... car la le curseur reviendra au début a chaque fois...Enfin faut essayer... :aie:

Hééé ben non... ça ne fonctionne toujours pas :/

J'ai essayé d'aller encore un peu plus loin en indiquant où le curseur doit se placer:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function auto_format_majuscules(input){ //récupération de la position du curseur var start = input.selectionStart; var end = input.selectionEnd; //passage en majuscules input.value = input.value.toUpperCase(); //blur/focus input.blur(); input.focus(); //on force le curseur à revenir à sa position initiale input.selectionStart = start; input.selectionEnd = end; }
Cela fonctionne dans le sens où ça déplace le curseur là où on lui indique.
Mais le curseur est toujours hors de notre champs de vision.
En fait, c'est dans la gestion de ce qui est visible dans le cadre de l'input.
Lorsqu'on modifie la valeur de l'input, cette "fenêtre" de visibilité se réinitialise, et pour le coup, je vois pas trop comment arranger ça.

22/01/2009, 14h06
Borowsky

Et ta essayé de faire appel à ta fonction a travers un autre évènement que OnKeyUp ? OnKeypress ? OnChange ?
22/01/2009, 14h12
superpigeon

Disons que le but est que les lettres soient passées en majuscules au fur et à mesure que l'on écrit.
Avec onkeydown et onkeypress, la fonction est appelée avant que la lettre pressée ne soit écrite dans le champs, donc seules les lettres écrites précédemment sont passées en majuscules (par contre, ça fonctionne, on voit toujours le curseur).
Avec onchange, ce n'est que lorsqu'on a quitté le champs qu'il est passé en majuscules. Donc, ça ne va pas non plus.

L'événement onkeyup correspond à ce que je veux faire. Mais il y a juste un comportement étrange de l'input.
22/01/2009, 14h24
Borowsky

Je pense que tu peux le faire avec le OnKeyPress...

Dans ta fonction appelée par l'évènement OnKeyPress, tu récupère la touche tapée au clavier, tu la met en majuscule et tu l'ajoute a ton input...

En code, je te laisse faire car je ne sais pas comment récupéré la touche tappée au clavier... :mrgreen:
22/01/2009, 14h27
superpigeon

bon... en admettant que ce comportement est aormal, que c'est un bug du navigateur et qu'on n'y peut rien.

On peut peut-être utiliser l'événement onkeydown (ou onkeypress), intercepter la toucher pressée par l'utilisateur et si c'est une lettre, la remplacer par son équivalent en majuscule.

C'est moins élégant, plus tordu, mais ça pourrait fonctionner.

EDIT: les grands esprits se rencontrent :P
22/01/2009, 14h35
Borowsky

:mouarf: :mrgreen: :aie:

Et tu es sur qu'avec le OnKeyPress la fonction est appelé avant que la lettre soit inscrite dans le input ??
22/01/2009, 14h41
superpigeon

Bon, finalement, cette solution n'est pas si miraculeuse que ça.
On peut savoir quelle touche a été pressée, mais ça ne nous aide pas plus que ça.
Les lettres accentuées sur un clavier sont sur les mêmes touches que des chiffres, et on ne peut pas forcément faire la distinction. Sans compter qu'il y a plusieurs types de claviers.

EDIT: oui, j'ai fait le test, et c'est bel et bien la valeur sans la touche pressée qui est prise en compte.
22/01/2009, 14h44
Borowsky

Ok Ok beh bonne chance ! ^^ :lol:
22/01/2009, 15h37
superpigeon

Bon, tout ce que j'ai trouvé pour limiter la casse, c'est d'allonger les champs concernés.
Mais c'est quand même pénible...
J'irais voir sur le site de Mozilla, il doit y avoir un endroit pour la soumission de bugs.

Après tests, le bug apparait:
Firefox 3 : oui
IE 7 : non
Safari : non
Chrome : non
Opera : oui
22/01/2009, 15h40
franculo_caoulene

Ce n'est pas forcément un bug, ça peut être un choix. IE7, FF3, Opera 9 et Safari 3 ont des comportements différents.
22/01/2009, 15h45
superpigeon

Oui, ce n'est certainement pas un bug, mais c'est un choix discutable. :)