Input text : onFocus / onMouseOn / OnMouseOout

**avogadro** · 21/08/2006, 17h41

Bonjour,

j'ai un petit bout de code qui s'apparente à ça :

Code :

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

1
2
3
4
5
<input type="text" size="40" maxlength="50" name="pharma_name"
 onFocus='javascript:style.background="yellow"'
 onMouseOver='javascript:style.background="yellow"' 
 onMouseOut='javascript:style.background="white"'>
</font></td>

Probleme 1 : le onFocus ne marche pas !

Probleme 2 : une fois les evènements finis, la bordure qui était égale a 1 a disparu, dans il faut rajouter quelque part border="1" mais je ne sais pas comment !

Avez vous des idées? oO

**KiLVaiDeN** · 21/08/2006, 17h45

Salut,

Et ceci ?

Code :

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

1
2
3
4
5
<input type="text" size="40" maxlength="50" name="pharma_name"
 onFocus='javascript:this.style.backgroundColor="yellow"'
 onMouseOver='javascript:this.style.background="yellow"' 
 onMouseOut='javascript:this.style.background="white"'
 onBlur='javascript:this.style.backgroundColor="white"'>

PS : n'utilises pas les balises FONT, utilises des feuilles de style !

**denisC** · 21/08/2006, 17h47

Envoyé par avogadro

Avez vous des idées? oO

mets le nom des evenements en minuscule (onfocus, onmouseout)

Remplace

javascript:style.background="yellow"

par

Code :

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

1
2
 
this.style.background="yellow"

(on s'en doute un peu que c'est du javascript)

**KiLVaiDeN** · 21/08/2006, 17h49

Envoyé par denisC

mets le nom des evenements en minuscule (onfocus, onmouseout)

Salut denisC,

Est-ce vraiment important, la casse des évènements ?

A+

**FremyCompany** · 21/08/2006, 17h53

Envoyé par KiLVaiDeN

Salut denisC,

Est-ce vraiment important, la casse des évènements ?

A+

Ca ne l'est plus, mais avant ca l'était...

**denisC** · 21/08/2006, 18h04

Envoyé par KiLVaiDeN

Salut denisC,

Est-ce vraiment important, la casse des évènements ?

A+

Non, mais les bonnes habitudes, ce n'est jamais génant

Si on ne voit pas d'autre solution, on peut toujours commencer par ça. Comme la casse est important en javascript (mais pas en HTML), meiux vaut avoir les bonne habitudes.

**avogadro** · 21/08/2006, 19h44

Envoyé par KiLVaiDeN

Salut,

Et ceci ?

Code :

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

1
2
3
4
5
<input type="text" size="40" maxlength="50" name="pharma_name"
 onFocus='javascript:this.style.backgroundColor="yellow"'
 onMouseOver='javascript:this.style.background="yellow"' 
 onMouseOut='javascript:this.style.background="white"'
 onBlur='javascript:this.style.backgroundColor="white"'>

PS : n'utilises pas les balises FONT, utilises des feuilles de style !

c'est toujours pareil pour le onFocus, je comprend pas, il ne fonctionne pas oO

Et il y a toujours le probleme sous IE, la bordure disparait, il faudrait mettre

Code :

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

onMouseOut='javascript:this.style.background="white";this.style.border="1"'

Mais ici la syntaxe est mauvaise!

**FremyCompany** · 21/08/2006, 20h03

je rappelle la différence entre border et borderWidth....
... entre background et backgroundColor
... que borderWidth réclame une unité (px, pt, %, ...)
... que si le controle a le focus, et qu'ensuite on sort la souris de controle (par ex pour savoir lire la lettre sous le cuseur) la couleur de fond va changer

**avogadro** · 22/08/2006, 09h40

Envoyé par FremyCompany

je rappelle la différence entre border et borderWidth....
... entre background et backgroundColor
... que borderWidth réclame une unité (px, pt, %, ...)
... que si le controle a le focus, et qu'ensuite on sort la souris de controle (par ex pour savoir lire la lettre sous le cuseur) la couleur de fond va changer

pk ce rappel?

Le onFocus et interprété par FF et IE je pense, mais ça ne marche pas, ça ne vient pas d'une de mes autres fonctions d'apres moi!

exemple de rendus (avec le onMouseOn)
sous FF:

IE:

(bordure absente)

**javatwister** · 22/08/2006, 09h56

en gros - si j'ai un peu compris - je dirais ça:

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
<p>
<input type="text" style="border:3px solid" size="40" maxlength="50" id="t" name="pharma_name" />
</p>
 
 
 
<script type="text/javascript">
 
 
var ch=document.getElementById("t");
 
function col(){
ch.style.backgroundColor="#ffff00"
}
 
function decol(){
ch.style.backgroundColor="#ffffff"
}
 
ch.onfocus=col;
ch.onmouseover=col;
ch.onmouseout=decol;
ch.onblur=decol;
 
</script>

mais c'est lourdingue;

**avogadro** · 22/08/2006, 10h30

oui c'est ça, mais je peux savoir pourquoi le onFocus ne marche jamais, (si c'est bien ça c'est quand je suis dans l'input texte, que j'ai cliqué dedans et que j'ai fait tab pour y acceder)
EDIT: marche que avec le tab!

Pour faire un effect de couleur qui deviens de plus en plus claire au cours du temps il suffis de mettre un interval de temps entre chaque éxécution de la fonction et de diminuer les couleurs RBJ ou comment on fait?

ca donnerais un final le fait que si l'on passe sur plusieur input text a la suite ya tout variation de couleur qui se fait progressivement, je sais pas si vous vouyez le genre d'effet!

**KiLVaiDeN** · 22/08/2006, 10h52

Salut,

onFocus fonctionne, c'est l'inverse du onBlur, et l'évènement ne se déclenche que quand le focus est donné à l'élément.

Donc un TAB, un clic dessus ( quand un autre champs est selectionné uniquement, sinon la deuxième fois, ça ne fait que déclencher le onClick )..

Sinon, changer la couleur progressivement, le plus simple serait d'avoir un tableau des couleurs du dégradé et de le parcourir progressivement, car sinon ça risque d'être un peu plus compliqué ( mais faisable ). En cherchant un peu tu vas trouver

A+

**avogadro** · 22/08/2006, 11h02

pour que ça marche je pourais rajouter une petite ligne comme ça nan?

Code :

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

1
2
3
4
5
ch.onfocus=col;
ch.onmouseover=col;
ch.onmouseout=decol;
ch.onblur=decol;
ch.onclick=col;

**javatwister** · 22/08/2006, 11h09

inutile...

**avogadro** · 22/08/2006, 11h37

Envoyé par javatwister

inutile...

bah si on clic dessus ça se color pas !

**KiLVaiDeN** · 22/08/2006, 11h51

Désolé de le dire, mais c'est un petit peu agaçant les gens qui disent "ça marche pas" et qui ne cherchent pas plus loin.

Pour tester, tu m'as obligé à créer un fichier, et ça fonctionne parfaitement, comme on le pensait.

Code :

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

1
2
3
4
5
6
7
8
9
<html>
<body>
<form name="testForm" id="testForm" method="POST">
  <input type="text" name="test" id="test"
         onFocus="document.getElementById('test').style.backgroundColor='yellow'"
         onBlur="document.getElementById('test').style.backgroundColor='white'">
</form>
</body>
</html>

**avogadro** · 22/08/2006, 11h53

abusé, j'avais fait la même chose :s
enfin bref tempis !

**otyg5937** · 22/03/2010, 11h05

le plus simple est quand même d'appeler une classe CSS via le java script, ainsi on peut mettre ce que l'on veut sans restriction
par exemple :

Code :

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

<input type="text" name="test" id="test" onFocus="javascript:this.className='MouseOver'" onBlur="javascript:this.className='MouseOut'" />

et les classes CSS correspondantes :

Code :

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

1
2
3
4
.MouseOver {border:1px solid red}
.MouseOut {border:1px solid yellow}
/* je rajoute un outline : none à l'input pour virer le filet disgracieux à la sélection */
input {outline : none}

Input text : onFocus / onMouseOn / OnMouseOout

JavaScript

Discussions similaires

Partager

Partager