modification valeur d'un input text et position du curseur

**superpigeon** · 22/01/2009, 11h21

Bonjour,
Je travaille essentiellement sous Firefox.
J'ai une fonction, très simple qui transforme le contenu d'un input en majuscules :

Code :

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

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 !

**Borowsky** · 22/01/2009, 12h27

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 ?

**superpigeon** · 22/01/2009, 12h45

je l'appelle onkeyup sur l'input.

J'ai fait un petit fichier d'exemple :

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

**franculo_caoulene** · 22/01/2009, 12h51

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!

**superpigeon** · 22/01/2009, 12h57

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

**franculo_caoulene** · 22/01/2009, 13h01

C'est vrai je dis de grosses bêtises ces jours-ci. Je vais me prendre des vacances de forum.

**Borowsky** · 22/01/2009, 13h39

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

**superpigeon** · 22/01/2009, 13h41

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

**Borowsky** · 22/01/2009, 13h49

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

Code :

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

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 :

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

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

**superpigeon** · 22/01/2009, 14h01

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 :

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

**Borowsky** · 22/01/2009, 14h06

Et ta essayé de faire appel à ta fonction a travers un autre évènement que OnKeyUp ? OnKeypress ? OnChange ?

**superpigeon** · 22/01/2009, 14h12

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.

**Borowsky** · 22/01/2009, 14h24

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

**superpigeon** · 22/01/2009, 14h27

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

**Borowsky** · 22/01/2009, 14h35

Et tu es sur qu'avec le OnKeyPress la fonction est appelé avant que la lettre soit inscrite dans le input ??

**superpigeon** · 22/01/2009, 14h41

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.

**Borowsky** · 22/01/2009, 14h44

Ok Ok beh bonne chance ! ^^

**superpigeon** · 22/01/2009, 15h37

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

**franculo_caoulene** · 22/01/2009, 15h40

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.

**superpigeon** · 22/01/2009, 15h45

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

modification valeur d'un input text et position du curseur

JavaScript

Discussions similaires

Partager

Partager