Discussion :

[kij]

Bonjour,

J'ai besoin d'aide sur le point suivant:

Connaissez-vous l'inverse de la fonction "select()" s'appliquant sur des champs de type text/textarea ? Une sorte de fonction permettant de déselectionner le contenu d'un champ en javascript ?

Explications détaillées :
Actuellement sur une page de site, j'utilise un petit code javascript pour donner le focus à certains champ de formulaire en fonction de certaines choses.
En plus, lorsqu'un champ gagne le focus, un "select()" est exécuté sur le champ en question pour pré-sélectionner son contenu.

Mon problème est le suivant : La sélection du contenu ne concerne que des champs de type text / textarea, or j'ai aussi des listes déroulantes sur ma page, et lorsque celle-ci gagne le focus, je ne fais pas de "select()" sur l'objet liste puisque cette fonction javascript ne s'applique pas aux listes.
Le hic c'est que lorsque le focus passe d'un champ text à un autre, le contenu du précédent champ est automatiquement désectionné puisque le contenu du nouveau est sélectionné, mais dans le cas d'un passage d'un champ text à une liste, le contenu du champ précédent (de type texte) reste sélectionné même si c'est la liste qui a le focus.

J'aimerai donc savoir s'il existe une fonction inverse à la fonction "select()" applicable sur des champs de type text/textarea ?
Ou éventuellement si quelqun a une idée de comment faire autrement ?

Petite précision: ma page est construite dynamiquement donc impossible de coder les choses "en dur".

Merci de m'avoir lu et pour les aides éventuelles apportées.

Cdt,

[franculo_caoulene]

Salut,

Non, il n'y a pas de méthode inverse à select()

Désolé, je ne connais pas de solution.

[kij]

Ok, et pourtant lorsque tu as un contenu de texte sélectionné et que tu fais TAB pour aller au champ suivant, le contenu du texte est bien désectionné.
Comment cela est-il fait ? J'imagine que ça puisse être reproductible via un script JS non ?

[franculo_caoulene]

Et bien tu as peut-être répondu à ta question. As-tu essayé de faire quelque chose ressemblant à ça :

Code :

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

elementPrecedent.blur();

[kij]

Oui mais sans grand succès malheureusement pour moi.

La fonctione blur fait bien perdre le focus, mais ne déselectionne pas le texte pré-sélectionné avec la fonction select()

Par je n'y avais pas pensé avant mais... sur ces fameux éléments (des textarea), j'ai ré-écrit la fonction blur.
Il se peut donc que ce soit pour ça qu'un tel code ne fonctionne pas :

Code :

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

1
2
3
4
5
 
if ( elemt.nodeName.toLowerCase() == "select" ){
	self.document.activeElement.blur();
}
elemt.focus();

[Bovino]

Il existe une astuce sur FF en utilisant selectionStart :

Code :

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

document.getElementById('monText').selectionStart=document.getElementById('monText').value.length;

[franculo_caoulene]

Aurais-tu un code à nous montrer? Car d'après ce que je lis je ne vois pas de raison à cela.

[kij]

Ok, alors effectivement le code de Bovino ne fonctionne pas sous IE. Or le site doit être compatible IE donc... ^^ mais merci tout de même pour cette remarque

Pour ce qui est de donner mon code, tout donné serait imbuvable, je vais donc essayer d'expliquer au mieux l'organiser de ma part et le code javascript en relation avec mon problème.

Donc, sur ma page j'ai une table HTML dans laquelle j'ai plusieurs lignes.
Ces lignes (TR objects) sont identifiées par un nom ayant pour forme "section_"+numero. Ce numéro étant incrémenter dans ma page JSP selon certains critères. Pour faire court disons quand dans ma part j'ai 4 sections, les numéro allant de 0 à 3.
Sur chacune de ces lignes j'ai un JS sur l'évènement "onclick" afin de mettre à jour le numéro de section relatif à la ligne lorsqu'elle (ou l'un de ses éléments) est sélectionné(e). Une variable JS global stock cette valeur dans la page.
Dans chacune des lignes j'ai des textarea sur lesquels j'ai défini des onfocus et onblur. Le onfocus déclenche du JS permettant entre autre de sélectionné le contenu. Le onblur permet de faire deux trois bricoles, coloration du champ en fonction de la modification du contenu mais rien qui soit en relation avec le problème.

A coté de cela j'ai un évènement clavier sur les touches F7 et F8. Pour simplifier on se concentre sur F8 dont le rôle est de passer d'une section à une autre.

Voici le code javascript appelé sur F8 :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
function findNextSection2 ( ){

	var index = TRIndex;
	var tableObj = parent.frames["content"].document.getElementById("main_table");
	if ( tableObj == null )
		return null;
	
	// --- Search for TBODY element of the table
	for ( var i = 0; i < tableObj.childNodes.length; i++ )
		if ( tableObj.childNodes[i].nodeName == "TBODY" ){
			tableObj = tableObj.childNodes[i];
			break;
		}
	
	if ( tableObj.childNodes.length < (index) )
		return null;
	
	// --- Init start index in the next TR / line
	var i				= 0;
	var elementFound 	= false;
	var elemt 			= null;
	var labelToFind		= "section_"+INDEX_FIELD_FOCUSED;
	
	// --- Find the real index of table content (because of comment childs)
	var i = 0;
	while ( !elementFound && i < tableObj.childNodes.length ){

		if (tableObj.childNodes[i].nodeName == "TR"){
			
			if ( tableObj.childNodes[i].name != null && tableObj.childNodes[i].name.indexOf(labelToFind) != -1 ){
				isFocusedObjFound = true;
				elemt = findNext(tableObj.childNodes[i],false);
				if ( elemt != null )
					elementFound = true;
			}
		}
		// --- Increase counter
		i++;
	}
	
	// --- Set focus on the retrieved element if not null
	if ( elemt != null ){
		if ( elemt.nodeName.toLowerCase() == "select" ){
			self.document.activeElement.blur();
		}
		elemt.focus();
	}
}


function findNext ( elem, isTestIt ){
	
	// --- Test if current element if focusable
	if ( isTestIt ){
		// --- Check if current elem is focusable
		if ( isFocusedObjFound == true && isFocusableElem(elem) )
			return elem;
		// --- Check if current element is the focused element
		if ( !isFocusedObjFound && elem == focusedObj )
			isFocusedObjFound = true;
	}

	// --- Roll on focused element child nodes to find one focusable
	var found = false;
	var retrievedElem = null;
	
	if ( elem.childNodes ){
		for (var i = 0; i < elem.childNodes.length; i++){
			retrievedElem = findNext(elem.childNodes[i],true);
			if ( retrievedElem != null )
				break;
		}
	}
	
	// --- Finally return the element retrieved or null if not found
	return retrievedElem;
	
}

La fonction 'findNextSection2' est la fonction principale chargée de récupérer le premier objet TR de la table ayant pour nom "section"+numero.
A partir de cet objet TR, j'appelle ma fonction 'findNext' (récursive) qui permet de récupérer le premier objet (dans l'ordre d'apparition sur la page) contenu dans ce TR et qui soit focusable.

En gras :
Une fois l'objet en question récupéré, la fin de la fonction 'findNextSection2' donne le focus au nouvel objet focusable et (ce que je souhaite faire), tente de déselectionné le contenu du champ précédant le nouveau champ est de type SELECT.

Voilà, rien de bien compliqué en soit donc je ne vois pas pourquoi le texte du champ précédent n'est pas dé-sélectionné comme il le faudrait.

PS: j'ai retiré mon évènement onblur des textarea pour voir si le fait d'appeler une fonction javascript empêche le fonctionnement "générique" du onblur (s'il y en a un ?), mais ça ne change rien.

Merci à vous deux en tout cas pour vous être penché sur le problème.

[kij]

Sinon j'avais penser à faire un peu de bricolage : coller un champ invisible dans la page sur lequel passer le focus et sélectionné son contenu avant de donner le focus au champ qui m'intéresse mais... j'avais oublié qu'on ne peut pas activer de contrôle sur un champ invisible :s

Bon, je vais mettre ce problème de coté pour ce soir, mes idées seront peut-être plus claires demain.

[franculo_caoulene]

Pourrais-tu intégrer ton code javascript dans une page html qui illustrerait ton cas et qui ne me forcerait pas à remonter toute une page pour tester?
Qu'on ait qu'à faire un ctrl+C/ctrl+V quoi.

[kij]

Non impossible, la page en question utilise d'autre page pour fonctionner correctement, le code pour tout ceci dépasse facilement les 10 000 lignes et pour des raisons de "confidentialité" du code je vais éviter de tout poster ici


Je suis bien conscient que sans une page de test réelle il est bien difficile d'aider correctement à débugger.
Mais faire une page de test spéciale pour résoudre ce bug me ferait perdre plus de temps que je n'en ai donc je vais m'arrêter là

Ce n'est qu'un "bug" graphique de toute manière, et pour le contourner je peux très bien donner le focus à un autre champ qu'une liste dans mes sections de manière à contourner ce problème.

Si je trouve une vrai solution je la posterai ici.

Merci pour votre aide en tout cas

[Bovino]

Essaye en faisant un 'saut' intermédiaire sur un autre champ texte puis sur ton champ non texte, le select devrait du coup disparaitre et ce sera quasiment invisible pour l'utilisateur.

[kij]

Bonjour,

Alors, mes champs étant tous affectés par ma fonction permettant entre autre de sélectionner le contenu lors d'une prise de focus, je ne peux pas utiliser cette technique.
Par contre je l'ai mise en place sur le champ que j'ai ajouté sur ma page, à la différence près que celui-ci n'est plus invisible de manière à pouvoir activer des contrôles dessus. Un petit css pour le rendre "invisible" à l'oeil et le tour est jouer :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.anchorTop {
	vertical-align		: top;
	background			: transparent;
	color				: transparent;
	font				: 0 monospace;
	padding			: 0 0 0 0;
	margin			: 0 0 0 0;
	border			: 0;
	top				: 0;
	left				: 0;
	width				: 1;
	height			: 1;
}

Et la fin de ma fonction javascript :

Code :

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

1
2
3
4
5
6
7
8
 
if ( elemt != null ){
		if ( parent.frames["content"].document.getElementById("bin") ){
			parent.frames["content"].document.getElementById("bin").focus();
			parent.frames["content"].document.getElementById("bin").select();
		}
		elemt.focus();
	}

Problème résolu donc, un grand merci à vous deux pour m'avoir aider à le résoudre