Onmouseover sur un champs disabled

Version imprimable

16/04/2007, 09h53
ptr83

Onmouseover sur un champs disabled

Bonjour.

Je sais que normalement l'évènement onmouseover est ignoré si le champs est défini comme disabled... Cependant, sur IE 7 j'arrive à le simuler en entourant mon champs d'un span et de mettre l'évènement onmouseover sur celui-ci... De la manière suivante:

<span onmouseover="onmouseover();" onmouseout="onmouseout;"><input type='text' id='test' name='test' value="6" disabled></span>

Cependant cela ne fonctionne pas sous Firefox...

Quelqu'un aurait-il une solution qui me permette d'utiliser le onmouseover même sur un champs disabled?

Merci.
16/04/2007, 17h23
SpaceFrog

pour quelle raison ton champs est il disabled ?
tu peux contourner en mettant à la place de disabled onfocus="this.blur()" ??
17/04/2007, 08h42
ptr83

Citation:

Envoyé par SpaceFrog

pour quelle raison ton champs est il disabled ?
tu peux contourner en mettant à la place de disabled onfocus="this.blur()" ??

En fait les champs disabled dans mon application sont les champs qui contiennent des valeurs qui ne peuvent être modifiées (parce que l'utilisateur n'a pas les droits ou qu'il s'agit d'un élément de la clé par exemple).
Vu que toute l'application fonctionne sous ce schéma je doute que je puisse changer cela...

Merci quand même, et si tu as une autre solution, je suis plus qu'interessé :).
17/04/2007, 08h43
SpaceFrog

pourquoi une autre solution ?
si tu arrives à modifier un champs avec pa méthode fais moi signe ...
17/04/2007, 09h42
Korko Fain

Si l'utilisateur n'a pas à modifier un champ, je te conseil de l'écrire en brut (texte) et non dans un input car les disabled peuvent facilement etre désactiver avec quelques petits ajouts au navigateur et dans ce cas l'utilisateur peux modifier ce qu'il ne devrait pas pouvoir ^^
17/04/2007, 14h10
ptr83

SpaceFrog : je n'ai pas voulu dire que ta solution ne fonctionnait pas excuse moi :-). C'est juste qu'elle est trop différente de ce qui existe déjà dans l'application. Malheureusement, les autres développeurs ont mis des input disabled partout là où l'utilisateur ne peut modifier la valeur. Et pour respecter une certaine cohérance de l'application, je ne peux pas adopter ta méthode...
Je pourrai créer un input "normal" et le faire ressembler à un disabled en modifiant sa couleur de fond etc... Mais bon avec les différences IE/FF ça fera "bricolage"...

Je pense que la solution idéale aurait été de mettre simplement du texte simple là où la valeur ne peut être modifiée comme l'a dit Korko Fain mais je crains que mes supérieurs ne refusent de modifier toute l'application...
17/04/2007, 14h27
SpaceFrog

tu peux essayer de coller un div par dessus l'input mais ça va être une usine à gaz pour le positionnement
17/04/2007, 16h36
ptr83

Citation:

Envoyé par SpaceFrog

tu peux essayer de coller un div par dessus l'input mais ça va être une usine à gaz pour le positionnement

Entourer mon input d'un div me donne le même résultat que le span : cela marche sur IE mais pas sous FireFox...

Merci quand même :).
17/04/2007, 16h38
SpaceFrog

je ne pensais pas "entourer" mais positionner au dessus position:absolute z-index
...
18/04/2007, 09h55
ptr83

Citation:

Envoyé par SpaceFrog

je ne pensais pas "entourer" mais positionner au dessus position:absolute z-index
...

Oula oui c'est plus chaud ça :oops:

pas tant que ça

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function maskInput(obj){
var moncache=document.createElement('div');
moncache.style.position='absolute';
moncache.style.zindex='2';
moncache.style.top=obj.offsetTop;
moncache.style.left=obj.offsetLeft;
moncache.style.width=obj.offsetWidth;
moncache.style.height=obj.offsetHeight;
moncache.style.backgroundColor='transparent';
moncache.onclick=function(){alert('pas de saisie')
document.body.appendChild(moncache);
}

un petit exemple qui à l'air de tourner...

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type='text/javascript'>
function maskInput(obj){
 var moncache=document.createElement('div'); 
 moncache.style.position='absolute';
  moncache.style.zindex='2'; moncache.style.top=obj.offsetTop; 
  moncache.style.left=obj.offsetLeft; moncache.style.width=obj.offsetWidth; 
  moncache.style.height=obj.offsetHeight; 
  moncache.style.backgroundColor='transparent'; 
  moncache.onclick=function(){alert('pas de saisie')}; 
  document.body.appendChild(moncache); 
  obj.style.backgroundColor='silver';
  obj.style.color="white";
  obj.onfocus=function(){this.blur();}}
</script>
 
</head>
 
<body>
<form >
<input id='one' type='text' /><br /><br /><br />
<input id='two' type='text' />
<br />
<input type='button' onclick="maskInput(document.getElementById('one'))" value="disable" />
<input type='button' onclick="maskInput(document.getElementById('two'))" value="disable" />
</body>
 
</html>

et pour le fun la réactivation :

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type='text/javascript'>
function maskInput(obj){
 var moncache=document.createElement('div'); 
 moncache.style.position='absolute';
  moncache.style.zindex='2'; moncache.style.top=obj.offsetTop; 
  moncache.style.left=obj.offsetLeft; moncache.style.width=obj.offsetWidth; 
  moncache.style.height=obj.offsetHeight; 
  moncache.style.backgroundColor='transparent'; 
  moncache.onclick=function(){alert('pas de saisie')}; 
  moncache.id="mask"+obj.id
  document.body.appendChild(moncache); 
  obj.style.backgroundColor='silver';
  obj.style.color="white";
  obj.onfocus=function(){this.blur();}}
 
function Killmask(obj){
if(!document.getElementById('mask'+obj.id)){return false;}
document.body.removeChild(document.getElementById('mask'+obj.id));
obj.style.backgroundColor='white';
  obj.style.color="black";
  obj.onfocus='';
  }
 
 
</script>
 
</head>
 
<body>
<form >
<input id='one' type='text' /><br /><br /><br />
<input id='two' type='text' />
<br />
<input type='button' onclick="maskInput(document.getElementById('one'))" value="disable one " />
<input type='button' onclick="Killmask(document.getElementById('one'))" value="enable one " /><br />
<input type='button' onclick="maskInput(document.getElementById('two'))" value="disable two" />
<input type='button' onclick="Killmask(document.getElementById('one'))" value="enable two " /><br />
</body>
 
</html>

18/04/2007, 11h07
SpaceFrog

en y réflechissant ...
(toujours après ...)

il faut juste utiliser le onmouseover du div ou lui mettre un title ...
18/04/2007, 13h07
ptr83

Waw joli!

J'ai des progrès à faire en javascript quand je vois ça, beaucoup même puisque c'est censé être éfacile" lol.

Merci bien!