ajouter un événement onfocus à un champ input

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : ajouter un événement onfocus à un champ input

Yertle

Salut à tous. Je suis en train de développer une application web en html php javascript et j'aurais besoin à un moment donné de changer ou d'ajouter un événement onFocus à un champ input text.

Je m'explique, j'ai un script qui liste le contenu d'une base de données, et l'utilisateur doit pouvoir modifier ou supprimer une ligne.
Lorsqu'il choisit de supprimer ou de modifier une ligne, il clique sur un bouton radio et un formulaire de saisie se remplit avec les valeurs correspondantes.
Seulement voila, si l'action est "supprimer" j'aimerai que les champs text ne soient plus modifiables.

J'ai essayé plusieurs trucs genre : form.elements[i].onFocus = "this.blur()"; ou alors form.elements[i].readOnly = true;
et qq trucs comme ça mais rien n'y fait.

Après qq recherches sur le net, j'ai tjr rien trouvé .

Qqun aurait une solution ?
Merci d'avance.

Publicité

Yertle

Dois-je en déduire que personne ne peut m'aider ? :cry:

anapajari

s/travail/glanding on hfr/gs;

la syntaxe (enfin une des pour etre exacte) pour changer un evement est la suivante:

Code :

tonElement.unEvenement = function(event) {taFonction;};

avec unEvenement qui peut valoir onload, onclick, onmouseup, onmousedown, onblur ...
Tu as d'autres syntaxes, notamment avec attachEvent, celle du dessus à l'avantage de marcher sur a peu près tous les navigateurs.

Par ailleurs, quand tu commences a faire des trucs comme ça ( et particulierement une "application web" ), je te déconseille d'utiliser la "vieille syntaxte" javascript à base de form.elements...
Renseigne toi sur les fonction DOM, tu verras c'est bien plus pratique!!!

Yertle

j'ai tenté ceci mais ça sonnait faux, enfin ça me paraissait bizarre et effectivement ça ne marche pas...

Code :

form.elements[i].onFocus = enleverFocus(form.elements[i])

sachant que :

Code :

function enleverFocus(field){
field.blur();
}

Sinon qqun aurait de bonnes sources de renseignements sur le DOM ?

anapajari

s/travail/glanding on hfr/gs;

naaaan t'as po compris

Code :

form.elements[i].onFocus = function(event){ enleverFocus(this);}

tu peux passer this comme argument car au moment de l'appel de la fonction ( donc dans le onFocus) this pointera sur l'objet qui vient d'être onfocuser ( si ça existe comme mot).

Tu trouveras plein de renseignements sur pleins de site sur le dom.
la présentation sur le site developer.mozilla.org est pas mal.
Tu trouveras aussi quelques exemples assez clairs.
Après le DOM est "censé" être un standard implémenté de la même façon sur tous les navigateurs, fais attention il y a quand même quelques subtiles nuances.

Enfin:

chrisbk a écrit :

DOM1 est un autre jour

Yertle

Citation :

Code :

form.elements[i].onFocus = function(event){ enleverFocus(this);}

j'ai beau essayer ça ne marche pas...

anapajari

s/travail/glanding on hfr/gs;

boulette de ma part pas de F majuscule dans le onfocus !!!

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript">
function chgFocus(){
input = document.getElementById('inp') ;
if ( input.onfocus == null){
input.onfocus = function(event){ doIt();};
} else {
input.onfocus = null;
}
}
function doIt(){
alert('pouet');
}
</script>
</head>
<body >
<input type="text" id="inp"/>
<br/>
<input type="button" value="add/remove focus" onclick="chgFocus()"/>
</body>
</html>

Yertle

Bon ben j'ai essayé ça :

Code :

function enleverFocus(field){
field.blur();
}

pour ça :

Code :

form.elements[i].onfocus = function(event){ enleverFocus(this);}

Mais comme ça ne marchait pas j'ai essayé moins compliqué, j'ai fait comme toi précédemment (plus ou moins) :

Code :

function doIt(){
alert("pouët !" );
}

et plus loin :

Code :

form.elements[i].onfocus = function(event){ doIt();}

et en fait ben ça marche pas non plus :'C...

Message édité par Yertle le 16-03-2006 à 09:25:55

anapajari

s/travail/glanding on hfr/gs;

le code que je t'ai donné je l'ai vérifié sur IE/FF garanti il marche!!!

Mais je pense que c'est l'utilisation de

Code :

form.elements[i]

qui suxe...

Utilise plutot les fonctions DOM:

Code :

document.getElementById

Yertle

J'ai éclairci mon code, et en fait j'ai trouvé une erreur dans la console de la barre d'outils développeur FF :

Citation :

Erreur : [Exception... "'Permission refusée de modifier la propriété XULElement.selectedIndex' when calling method: [nsIAutoCompletePopup::selectedIndex]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame :: http://b8183/niko/code/appli/manip [...] 2110&gra1= :: enleverFocus :: line 75" data: no]
Fichier source : http://b8183/niko/code/appli/manip [...] 2110&gra1=
Ligne : 75

voici la ligne concernée :

Code :

function enleverFocus(input){
input.onfocus = input.blur();
}

j'ai aussi essayé avec ceci, avec ou sans quotes, mais même résultat :

Code :

function enleverFocus(input){
input.onfocus = this.blur();
}

Publicité

Yertle

Pour que tu comprennes mieux la globalité voici les fonction entières, en espérant que ça ne soit pas trop long (toute la fonction n'est pas utile a connaître...)

Code :

function enleverFocus(input){
input.onfocus = input.blur();
}
//rempli les champs du formulaire correspondant à la case cochée, les vide si la case en question est décochée
function remplirChamps(form,id,uf,mon,act){
var ecrit = 0; //booleen : 0 si champs non remplis, 1 si oui
var j = 0;
//vérifie si déja écrit
while(j<form.length && ecrit == 0){
if((form.elements[j].type=='text') && ((form.elements[j].name.substring(0,3) == "ide" ) && (form.elements[j].value==id))){
ecrit = 1;
}
j++;
}
if (ecrit == 0){ //si la ligne n'est pas déja écrite
j = 1;
var actionencours = "new";
for (var i=0 ; i<form.length ; i++){ //parcours total sur le formulaire passé en param
if(form.elements[i].type == 'text'){ //on cherche un champ texte
//dont le nom commence par "ide" et qui n'est pas déja rempli
if (form.elements[i].name.substring(0,3) == "ide" && form.elements[i].value == ''){
//on rempli les champs avec les valeur paramètres
form.elements[i].value = id;
i++;
form.elements[i].value = uf;
i++;
form.elements[i].value = mon;
i++;
form.elements[i].value = act;
ecrit = 1;
break; //les données sont écrite, on arrête le parcours du formulaire
}
}
}
}else{ //si les données sont déja entrées
actionencours = form.elements[j+3].value; //récupère dans le champs concerné l'action en cours
}
if (ecrit == 0){ //si les données n'ont pas été écrite, on a parcouru le formulaire sans trouvé de champs "ide" vide
ajoutChamps(champsaisie,'divchampsaisie'); //on rajoute des lignes dans le formulaire
remplirChamps(form,id,uf,mon,act); //on recommence le remplissage
}else{ //si les données on été écrite, on change le style des input selon l'action choisie
if (actionencours != act){ //si l'action entrée est différente de l'action en cours
if (act == "modif" ){ //et que c'est une modification
for (var i=j ; i<=j+2 ; i++){ //on parcour la ligne et on change le style pour chaque champ
form.elements[i].style.backgroundColor = "cyan";
form.elements[i].style.color = "black";
form.elements[i].onfocus = null;
}
}else{ //si c'est une suppression
for (var i=j ; i<=j+2 ; i++){ //on parcour la ligne et on change le style pour chaque champ
form.elements[i].style.backgroundColor = "yellow";
form.elements[i].style.color = "black";
form.elements[i].onfocus = function(event){ enleverFocus(this); };
}
}
// form.elements[j+3].value = act; //on modifie l'action
} //si l'action est la même on ne fait rien
}
}

anapajari

s/travail/glanding on hfr/gs;

ta fonction enleverFocus elle est pas bonne!

Code :

function enleverFocus(input){
input.blur();
}

Bon par ailleurs c'est completement stupide de faire un onfocus -> blur, ça veut dire que tu veux pas que le champs puisse être saisi, alors autant le mettre en disabled ou read-only.

Enfin si tu tiens vraiment a garder ton truc comme ça, envoie tout le code de ta page parce que là j'ai du mal a inventer le formulaire qui va avec

Yertle

Alors j'ai essayé d'inclure le code correspondant et nécessaire à la compréhension du pbm, mais apparemment il est tout de même trop important le post ne fontcionne pas. :heink:

Alors pour t'expliquer vite fait, j'ai un ensemble de lignes, je donne le choix soit de les supprimer soit de les modifer, ceci dit le script fonctionne par groupe de lignes, ce qui veut dire que pour les lignes choisies, je conserve l'action correspondante dans un champ caché. Et là pour différencier les champs suppr ou les champs modif, je change la couleur, et j'empêche l'utilisateur de faire des modifs sur les lignes qu'il désire suppr.
Un champs doit donc pouvoir passer de readOnly a read et write lorsque je change l'action désirée.

Ceci dit, il est vrai qu'un champ en readOnly à la place d'un onFocus="this.blur()" est bien plus pratique et plus approprié. Mais je ne sait pas non plus cmt est-ce qu'on affecte le readOnly a un champ.
J'ai essayé ça :

Code :

form.elements[i].readOnly = true;

mais ça ne marche pas...

Message cité 1 fois

Yertle

Tiens j'ai remplacé ma fonction enleverFocus() par la tienne, et ça marche, pourtant j'ai tjr la même erreur dans la console.

Message cité 1 fois

anapajari

s/travail/glanding on hfr/gs;

Yertle a écrit :

... un gros paté que je comprends pas

T'as pas un lien dessus ça irait plus vite

Yertle a écrit :

Ceci dit, il est vrai qu'un champ en readOnly à la place d'un onFocus="this.blur()" est bien plus pratique et plus approprié. Mais je ne sait pas non plus cmt est-ce qu'on affecte le readOnly a un champ.
J'ai essayé ça :

Code :

form.elements[i].readOnly = true;

mais ça ne marche pas...

Tiens ça ça marche t'as qu'a t'en inspirer:

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript">
function chgRO(){
input = document.getElementById('inp') ;
if ( input.readOnly == false){
input.readOnly = true;
} else {
input.readOnly = false;
}
}
</script>
</head>
<body >
<input type="text" id="inp"/>
<br/>
<input type="button" value="add/remove readOnly" onclick="chgRO()"/>
</body>
</html>

Yertle a écrit :

Tiens j'ai remplacé ma fonction enleverFocus() par la tienne, et ça marche, pourtant j'ai tjr la même erreur dans la console.

C'est que l'erreur est dans le reste de ton code!!!

Mais honnetement tu gagnerais beaucoup en lisibilité à te servir des fonctions dom getElementById et getElementsByTagName

Yertle

Citation :

...l'erreur est dans le reste de ton code

Non, l'erreur est bien sur le changement de onFocus, la console de debug me renvoie à cette ligne précisément.

Pour les fonctions DOM, je ne peux pas les utiliser paske je doit parcourir un formulaire dans son intégralité, et non un champ en particulier, je ne peux donc pas utiliser leur id on tag pour les repérer (d'ailleurs la console ne me donne ni erreur ni warning lors des parcours des formulaires alors qu'elle m'en donnait à d'autres endroits où là les getElementById était obligatoires pour rester dans les standards).

Pour finir, je te remercie pronfondément paske je viens grâce à toi de résoudre le pbm avec des readOnly, tout marche et sans erreur :wahoo:

Merci pour ton aide et ta patience et à bientot peut être

FORUM HardWare.fr

Programmation

HTML/CSS

ajouter un événement onfocus à un champ input

Sujets relatifs
[MySQL] Quel type de champ pour quel type de données ?	[Ant] Ajouter une librairie à mon build.xml
[php] [resolu]newbie. Comment ramener le focus sur le 1er champ	ajouter un evenement à une balise input
Comment ajouter une page [RESOLU]	Ajouter un lien dans les clics droits pour VoIP sous Firefox
Excel ajouter une nouvelle ligne automatiquement	[SQLServer]recherche sur un champ date indépendante du format
Plus de sujets relatifs à : ajouter un événement onfocus à un champ input

Page générée en 0.103 secondes