JavaScript – Modifier la valeur d'un input text…

alex.hitman · le 4 avril 2006

Bonjour à tous.

J'ai en fait une fonction javascript qui permet de modifier le contenu d'un input de type text.

Voici son code :

function hexa(couleur)
{
document.getElementById('hexa').value = couleur;
}

Ca marche parfaitement, mais seulement lorsque l'input id="hexa" se trouve en dehors d'un formulaire. Dès lors qu'il se trouve à l'intérieur d'un formulaire, c'est fichu pour IE et Opera (mais non Firefox).

Donc ma question est la suivante :

Comment modifier la valeur d'un input de type text se trouvant à l'intérieur d'un formulaire ?

Merci.

tangui · le 4 avril 2006

salut!

document.form[0].getElementById('hexa') peut etre? (0 si c'est le premier form)

alex.hitman · le 4 avril 2006

Merci mais... même problème.

KewlCat · le 4 avril 2006

Euh...

Quel que soit le contexte ("dans" un formulaire ou ailleurs), le getElementById() te retrouve ton élément sans souci.

Fais voir les différents codes, il y a forcément un truc qui ne colle pas dedans...

C'est une méthode du document qui permet de retrouver un élément, il faut juste faire attention à ne pas avoir plusieurs éléments avec le même id, et à être sûr qu'on respecte bien les majuscules et minuscules...

tangui : tu es certain qu'un élément Form possède une méthode getElementById() ?

alex.hitman · le 4 avril 2006

le getElementById() te retrouve ton élément sans souci

C'est pour ça que ça me parait bizarre...

Le contexte, ça fait un peu lourd dans le code mais le voici (c'est mon éditeur "bbcode" avec apperçu en temps réel que je suis en train d'inclure dans une application) :

http://www.informatique-web.net/wysiwyg/test.html

Sur les images (les couleurs), à droite, un onmouseover appelle la fonction hexa qui change la valeur de l'input situé juste en dessous.

Voici la fonction hexa :

function hexa(couleur)
{
document.getElementById('hexa').value = couleur;
}

Et un exemple d'appel ce cette fonction :

onmouseover="hexa('#CCFFFF')"

Sinon, simplement pour tester, rien que ceci ne fonctionne pas (alors que si l'on enlève le formulaire, c'est bon !) :

<!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="fr" >
 <head>
<title>
  BBCode en Javascript
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function hexa(couleur)
{
document.getElementById('hexa').value = couleur;
}
</script>
 </head>
 <body>
 <form action="truc.html" method="post" name="formulaire">
<a href="#" onmouseover="hexa('#CCFFFF')">TEST</a>
<input style="font-weight:bold;" type="text" id="hexa" value="#000000" size="8" />
 </form>
</body>

Voila, j'espère que vous pourrez m'éclairer ^^

Modifié le 4 avril 2006 par alex.hitman

tangui · le 5 avril 2006

tangui : tu es certain qu'un élément Form possède une méthode getElementById() ?

je ne suis pas allé voir les propriétés de Form

j'ai juste pensé que si il déplace ca dans un form, c'est qu'il fallait le spécifier quelque part... mvse déduction...

KewlCat · le 7 avril 2006

Juste un truc, comme ça, qui me vient à l'esprit...

Tu utilises un <input /> dans ta page ? Je veux dire, ta balise est auto-fermante ?

Il se peut (mais alors, rien n'est moins sûr puisque c'est une idée à 6h du mat) que IE et Opera aient un souci avec une balise input sans ChildNode... Essaie <input (...)> </input> (éventuellement en mettant un commentaire entre la balise ouvrante et la balise fermante, s'il le faut !)

Je sais que c'est le genre de truc incompréhensible qui m'a résolu quelques problèmes que je rencontrais avec IE... Mais ça m'étonne que ça touche l'attribut "value" du champ texte...

Autre truc : évite les <a> si c'est pour mettre un événement sur un bout de page... non seulement tu ne sais pas comment vont être "stylées" les balises <a>, mais en plus tu risques de gros soucis avec un rechargement de page quand tu mets un href à #. Utilise plutôt un span, même anonyme on s'en fout, c'est juste pour délimiter une zone dans ta page où l'événement sera déclenché. Colle-lui une classe si tu veux que ta "zone sensible" ait une apparence et un comportement distinct du reste du texte, mais évite les <a> qui sont là pour la navigation intra- et inter-documents...

Je viens d'aller voir ta page, c'est normal qu'il manque la fin du document ? (balises fin de body et fin de html inexistantes)

alex.hitman · le 7 avril 2006

Oui, la balise est auto-fermante. Je vais essayer ce que tu viens de me dire.

J'ai mis un <a> pour l'évènement, mais c'est juste un test. Dans la page que tu peux voir, j'utilise des <img> D'ailleurs cette page, c'est aussi une page de test "en vrac". C'est pour ça qu'il se peut, comme tu l'as dit, qu'il manque les balises de fin de body et de html.

Merci, je teste tout cet après-midi, ou ce soir.

alex.hitman · le 7 avril 2006

J'ai essayé, sans succès

Je vais essayer de remplacer l'input par une iframe éditable, et utiliser la propriété innerText. Sinon, y aurait-t-il une autre solution pour modifier le contenu de l'input ?

Merci encore.

KewlCat · le 7 avril 2006

J'ai essayé, sans succès

Tu as essayé quoi ?

Est-ce que tu pars d'un document qui est valide XHTML 1.0 Strict ?

Je maintiens qu'un document.getElementById() te retrouve ton élément, où qu'il soit placé dans la page (à condition que la structure du document soit valide)...

innerText n'est pas standard (tu risques de renverser la tendance avec un code qui fonctionne avec IE, peut-être Opera et pas du tout sur les autres navigateurs - basés sur KHTML et Gecko - )

Connexion

Pas encore inscrit ?

JavaScript – Modifier la valeur d'un input text…

Messages recommandés

alex.hitman

tangui

alex.hitman

KewlCat

alex.hitman

tangui

KewlCat

alex.hitman

alex.hitman

KewlCat

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer