Faire un effet "placeholder" en XHTML1.0

Version imprimable

17/06/2014, 17h54
Invité

Faire un effet "placeholder" en XHTML1.0
Bonjour,

Je sollicite l'aide de la communauté ne parvenant pas à trouver la solution à un problème ;

Contexte :
Je travaille à l'amélioration d'une application web en JEE conçu avec Struts.
Le front est donc composé de page JSP dans lequel je travail avec de l'HTML1.0
Je précise que je suis débutant et travail sur Eclipse !

Objectif :
Mettre un jour un textarea existant en proposant un text indicatif qui s'efface pour laisser l'utilisateur saisir ses infos (= placeholder sous HTML5)

Méthodes testé
L'appli étant en HTML1.0, j'ai contourné le problème par un script javascript pour effacer la "value" au clic de l'utilisateur ! Ce qui marche très bien jusqu'au submit du formulaire ou la page se raffraichi, que les données sont bien écrites dans la base mais que ma value reste au lieu de laisser place au texte de la base de donnée... (cf code ci dessous)

-------------------------------------------

// CODE JAVASCRIPT //
Code:

1 2 3 function clearContents(element) { element.value = ''; }
CODE DANS LA PAGE

Code:

<html:textarea onfocus="clearContents(this);" property="commentaireLibre" styleClass="champXXXXXXXLG" cols="50" rows="5" onkeyup="limite(this,'2048', 'max_desc');" onkeydown="limite(this,'2048', 'max_desc');" value="test"/>

Voilà ma demande est simple, je souhaite faire un placeholder sur un textarea en HTML1.0, j'ai cherché du côté du javascript pour contourner le problème... sans succès si quelqu'un à une idée, je suis preneur !

Merci d'avance à tout ceux qui prendron,t le temps de répondre
17/06/2014, 19h41
Muchos

Citation:

L'appli étant en HTML1.0

Vous voulez dire XHTML 1.0, non?

Comme réponse : pourquoi ne pas passer en HTML5? Il suffit de changer le DOCTYPE et d'utiliser l'attribut placeholder :)

EDIT:

L'attribut placeholder avec un doctype XHTML Strict semble valide, et fonctionne chez moi (Firefox 20) :weird:
Néanmoins, je rappelle que c'est un attribut qui peut largement être contourné; avec un label explicite par ex.
17/06/2014, 21h17
Invité

Struts 1 et le HTML5

Merci pour la réponse, oui XHTML 1.0 pardon !
C'est ce que j'avais commencé à faire, en changeant le Doctype pour passer les pages en HTML5 mais ma version de Struts semble ne pas supporter le HTML5...

Je relance le sujet car ayant été déplacé dans une autre rubrique et continuant à chercher une solution à mon problème !
Mon idée est de travailler autour d'une solution en Javascript pour mimer un placeholder ; les technologies en place ne permettant pas l'utilisation de balises HTML5 !
Je suis déjà parvenu à une solution (presque) satisfaisante puisque le traitement voulu fonctionne à part que mon textarea reste vide au chargement initial de la page !
Je cherche maintenant à faire une fonction lancée sur le <body onload="fonction()" qui au lancement de la page afficherait le texte "Entrez votre texte ici" si le textarea est vide...

Voici le code déjà écrit :
Code:

1 2 3 4 5 6 7 8 9 10 11 <html:textarea onfocus="if (this.value==message) this.value=''" property="commentaireLibre" styleClass="champXXXXXXXLG" cols="50" rows="5" onkeyup="limite(this,'2048', 'max_desc');" onkeydown="limite(this,'2048', 'max_desc');"> <script type="text/javascript"> //<![CDATA[ var message = "Entrez votre texte ici"; //]]> </script>
Merci par avance pour votre aide,

18/06/2014, 14h16
Bovino

Tu confonds deux choses pourtant différentes.

La version de HTML que tu utilises ne sert que pour la validation. Les fonctionnalités disponibles en HTML dépendent de la version du navigateur utilisée et non de celle de HTML.

Bref, si ton navigateur supporte placeholder, alors tu peux utiliser cet attribut quelle que soit la version de HTML. Le seul truc, c'est que ta page ne sera pas valide, mais cela n'empêche en rien un site de fonctionner.
18/06/2014, 14h37
Invité

Je ne travaille pas avec des pages HTML pures mais j'utilise le Framework Struts et travaille avec des page JSP qui lui utilisent des balises (Taglib) pour écrire en XHTML1.0 dans les pages. ces balises du type <html:textarea> sont très restrictives et n'autorisent pas tous les attributs ;dans le cas du placeholder, (même si je suis d'accord avec toi que tout se passe au niveau du navigateur), l'attribut est rejeté et génère une erreur de compilation... d'où ma recherche d'une solution alternative du côté du javascript... sinon il est évident qu'en deux clic j'aurais changé le doctype pour passer en HTML5 et le tour était joué... ;-)
18/06/2014, 14h47
Bovino

Mettre à jour Struts ne serait-il pas envisageable / souhaitable ? :?

Sinon

Code:

<input onfocus="if(this.value == this.defaultValue){this.value=''}" onblur="if(this.value == ''){this.value = this.defaultValue}" />