[HTML][calques][clic souris]

Version imprimable

24/02/2006, 09h15
tyrann

[HTML][calques][clic souris]

Bien le bonjour...

J'ai une tite question pour vous...

Le contexte tout d'abord :

J'ai refais une saisie semi-automatique en js, quand je clique sur l'element que je voudrais prendre, il le mets dans le bon textfield...

Depuis que j'ai changé quelque chose (je sais pas quoi car beaucoup de modif sans m'apercevoir de l'horreur) il ne veut plus cliquer sur l'element...

D'apres le fait que j'ai un onblur, je peux remarquer qu'il sort tout simplement du champ...

Donc voici ma premiere question : Est-ce qu'un calque peut etre "transparent" et qu'on ne pourrait pas cliquer dessus??? Quelle serait alors la propriété a changer?
24/02/2006, 09h48
franculo_caoulene

Salut,

Rien compris, recommence s'il te plaît. Sinon au cas où, si tu as un div transparent au dessus de n'importe quoi, on peut cliquer sur le n'importe quoi. S'il n'est pas transparent, on ne peut plus cliquer sur le n'importe quoi.
24/02/2006, 09h56
Shakta

bonjour,

le seul moyen que je vois pour qu'un calque soit transparent est :

Code:

style : "background-color: transparent";

Meis c'est juste l'arrire plan qui est transparent mais les elements comme un textbox ne le sera pas.

Citation:

Depuis que j'ai changé quelque chose (je sais pas quoi car beaucoup de modif sans m'apercevoir de l'horreur) il ne veut plus cliquer sur l'element...

Soit tu envoi ton code, pour qu'une personne en ligne ayant le temps puisse t'aider.
Soit tu prends ton code et tu enlèves des lignes petit à petit pour voir ce qui fais buguer ta page ... En gros on appel ça debugger.

Shakta
24/02/2006, 10h29
tyrann

Le code est fort long, je ne voudrais pas en décourager :?

Oui je connais le debugging...

C'est juste que ca fonctionnait avant et plus maintenant et ca m'enerve...

l'explication :

Un textfield : onfocus j'ajoute un onkeyup sur mon document et j'affiche un calque qui contiendra la liste des possibilités, onblur je fais degager la liste et je vire le onkeyup.

Pour chaque element de ma liste, j'ai onmouseover(change le style et fonctionne tres bien). J'ai aussi onclick (appelle une fonction qui, par le numéro envoyé, inscrit le choix dans le textfield.

Le probleme : quand je clique dans ma liste, il prend en compte le onblur du textfield plutot que le onclick de l'element de liste!

J'espere avoir été plus clair :wink:
24/02/2006, 10h52
Shakta

alors si j'ai bien compris.
Quand tu clique sur un choix de ta liste il degage ta liste mais n'affiche pas le choix dans ton textbox.
Si c'est ça c'est plutot un probleme de javascript que tu as.
Ca fais longtemps que je n'ai pas fais de javascript ... Mais peu tu appeler ta fonction de ton onclick dans ton onblur?
24/02/2006, 11h16
tyrann

Effectivement, c'est ce que je viens de faire, mais c'est une solution de contournement qui me déplait... Les réactions sont (parfois) embetantes...

Je ne cloture donc pas le topic car j'aimerais quand meme comprendre pourquoi et si possible le remettre comme c'etait!

Je dirais que ce n'est pas un probleme de javascript puisque la bonne méthode n'est pas appellée tout simplement! Donc je dirais que c'est a cause du calque!
24/02/2006, 11h23
Shakta

humm je comprends et suis de ton avis.
Par contre sans ton code cela risque d'etre difficile de t'aider.
essaye de faire une syntèse de celui, une sorte de code theorique afin qu'on t'aide . Dès fois ca permet de voir la solution.

Voila une partie mon js.

Code:

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
function aelist(n) { 
	document.onkeyup=function(evt){
		if (window.event) {
			key=window.event.keyCode
		}
		else {
			key=evt.which;
		}
		completesearch(key)
	}; 
	document.getElementById("choix_search"+n).style["visibility"]="visible"; /mon calque
	document.getElementById("choix_search"+n).innerHTML="";
	return true; 
} 
 
function relist() {
	//removeEventListener
	document.onkeyup=null;
	clearList();
	return true;
}
 
function completesearch(key) {
	var dept=document.getElementById("input"+n).value;
	switch(key){
		case 27: 
			clearList();
			document.getElementById("input"+n).value="";
			break;
		case 13:
			break;
		case 8:
			dept=dept.substr(0,dept.length-1);
			document.getElementById("input"+n).value=dept;
			completeField(true);
			break;
		case 40:
			goDown();
			break;
		case 38:
			goUp();
			break;
		default:
			if(dept !="") {
				completeField(false);
			}
			else{
				clearList();
			}
	}
}
 
function mouseOn(id){
	//Pseudo roll-over
	ok=true;
	for(i=1; i<=taille_liste && ok==true; i++) {
		if(! document.getElementById("p" + (i+1))) {
			ok=false;
		}
		va=document.getElementById("p" + i).className;
		if(va=="automenu") {
			document.getElementById("p" + i).className="n";
			ok=false;
		}
	}
	document.getElementById("p" + id).className="automenu";
	class_p=id;
	return true;
}
function selectElement(num) {
	//DÃ©placement dans la liste au cavier -> affichage de la valeur dans textinput.
	document.getElementById("input"+n).value=document.getElementById("p" + num).innerHTML;
	return true;
}
 
function completeField(returnKey){
	var alpha=document.getElementById("input"+n).value;
	var nbElem = createList();
	var cpt=1;
	for(i=index_lift_list; i<=tab_list_aff.length-1 && cpt<=taille_liste+index_lift_list-1; i++){
		document.getElementById("choix_search"+n).innerHTML+="<p class=\"n\" onMouseOver=\"javascript:mouseOn(" + cpt + ");\" id=\"p" + cpt + "\"onclick=\"javascript:selectElement("+i+");\">" + tab_list_aff[i] + "</p><br>";
		cpt++			
	}
	if(nbElem>1){
		document.getElementById("p1").className="automenu";
		choix_1=document.getElementById("p1").innerHTML;
		saisie=document.getElementById("input"+n).value;
		l_saisie=saisie.length;
		l_choix=choix_1.length
		if(saisie.toLowerCase() != choix_1.toLowerCase() && l_saisie<l_choix) {
			document.getElementById("input"+n).value=choix_1;
			if(document.getElementById("input"+n).createTextRange) {
				var rg=document.getElementById("input"+n).createTextRange();
				rg.moveStart("character",l_saisie);
				rg.moveEnd("character",0);
				rg.select();
			}
			else {
				document.getElementById("input"+n).selectionStart=l_saisie;
				document.getElementById("input"+n).selectionEnd=l_choix;
			}
		}
	}
	else{
		if(returnKey){
			//boucle pour reprendre la derniere occurance trouvée, fonctionnement par récurence
			if(alpha.length >0){
				completesearch(8);
			}
		}
		else {
			document.getElementById("choix_search"+n).innerHTML="<p class=\"n\" id=\"p" + cpt + "\">Aucune correspondance</p><br>";
			}
	}
}
 
function createList(){
	var cpt=1;
	document.getElementById("choix_search"+n).innerHTML="";
	var alpha=document.getElementById("input"+n).value;
	tab_list_aff = new Array;
	for(i=1; i<=tab_list.length-1; i++){  
		tab2=tab_list[i].replace(/[àâä]/gi,'a'); 
		tab2=tab2.replace(/[éèêë]/gi,'e'); 
		tab2=tab2.replace(/[ïî]/gi,'i'); 
		tab2=tab2.replace(/[ôö]/gi,'o'); 
		tab2=tab2.replace(/[ùüû]/gi,'u');
		// on supprime les majuscules et on cherche une correspondance
		if(tab2.toLowerCase().substr(0,alpha.length) == alpha.toLowerCase()){
			tab_list_aff[cpt]=tab_list[i]
			cpt++;
		}
	}
	return cpt;
}

Et une partie mon HTML :

Ce que j'ai mis maintenant pour que ca fonctionne (avec petites modifs dans le js...)

Code:

1
2
<td><input type="text" name="originator" id="input1" autocomplete="off" style="width:300px;" value="" onFocus="javascript:aelist('1');" onBlur="javascript:selectElement();" >
              <div style="width: 300px; background-color: #FFF; border: solid black 1px; visibility: hidden; z-index: 100; position: absolute; left: 353px; top: 170px;" id="choix_search1"></div></td>

Ce que j'avais mis (et que je voudrais remettre) :

Code:

<td><input type="text" name="originator" id="input2" autocomplete="off" style="width:300px;" value="" onFocus="javascript:aelist('2');" onBlur="javascript:relist();" >

24/02/2006, 14h12
Shakta

bon j'ai essaye une petite demi heure et je bloque sur le passage d'argument de ta function aelist il me retourne undefined....
J'essayerai de regarder une autre fois des j'ai un peu de temps .. Promis
24/02/2006, 14h21
tyrann
ah lol

Mais en fait t'en a pas besoin pour tester toi :oops:

Le n sert uniquement a envoyer le numéro de l'id du textfield afin de modifier le bon :)

Sinon tu peux faire direct
Code:

1 2 3 4 5 6 7 8 9 function aelist(evt) { if (window.event) { key=window.event.keyCode } else { key=evt.which; } completesearch(key) }