Onmouseover sur un champs disabled [Trucs & Astuces]

**ptr83** · 16/04/2007, 09h53

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.

**SpaceFrog** · 16/04/2007, 17h23

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

**ptr83** · 17/04/2007, 08h42

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é

.

**SpaceFrog** · 17/04/2007, 08h43

pourquoi une autre solution ?
si tu arrives à modifier un champs avec pa méthode fais moi signe ...

**Korko Fain** · 17/04/2007, 09h42

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

**ptr83** · 17/04/2007, 14h10

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

**SpaceFrog** · 17/04/2007, 14h27

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

**ptr83** · 17/04/2007, 16h36

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

.

**SpaceFrog** · 17/04/2007, 16h38

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

**ptr83** · 18/04/2007, 09h55

Envoyé par SpaceFrog

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

Oula oui c'est plus chaud ça

**SpaceFrog** · 18/04/2007, 10h18

pas tant que ça

Code :

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

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);
}

**SpaceFrog** · 18/04/2007, 10h49

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

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

**SpaceFrog** · 18/04/2007, 10h54

et pour le fun la réactivation :

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

**SpaceFrog** · 18/04/2007, 11h07

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

il faut juste utiliser le onmouseover du div ou lui mettre un title ...

**ptr83** · 18/04/2007, 13h07

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!

Onmouseover sur un champs disabled [Trucs & Astuces]

JavaScript

Discussions similaires

Partager

Partager