JSF: valeurs pré-remplies avec champ de saisie?

Question

J'ai essayé de chercher, mais je n'ai pas trouvé la réponse. Je vois quand vous posez une question sur stackoverflow, le champ de saisie pour "tags" affiche le texte gris "au moins une balise telle que ... etc". Au clic, le texte gris disparaît et vous pouvez commencer à taper vos valeurs. Si je clique dessus, les instructions réapparaissent. Comment je fais ça? Existe-t-il des implémentations hors de cette fonctionnalité ou cela nécessite-t-il une implémentation personnalisée?

Merci!

Answer 1

Deux bibliothèques de composants JSF qui offrent cette fonctionnalité vient à l'esprit:

• OpenFacesinput text with Prompt text
• PrimeFacesWatermark

Answer 2

Il s'agit d'un gestionnaire d'événements blur/focus javascript dans le champ de saisie. En jQuery ce serait quelque chose comme ce qui suit:

HTML

<input type="text" name="your-input" id="your-input" title="Enter a value"/> 

jQuery

$('#your-input').focus(function(){ 
    var defaultVal = $(this).attr('title'); 
    if($(this).val() == defaultVal) 
     $(this).val(''); 
}); 
$('#your-input').blur(function(){ 
    var defaultVal = $(this).attr('title'); 
    if($(this).val() == '') 
     $(this).val(defaultVal); 
}); 
$('#your-input').trigger('blur'); 

Il prend la valeur par défaut de title attribut de l'entrée et définit sa valeur sur le focus et brouiller les événements en fonction de la valeur actuelle de l'entrée. Le dernier appel trigger() permet de définir correctement la valeur de l'entrée lors du chargement de la page. Vous pouvez le voir in action here.

Answer 3

L'exemple le plus simple serait

window.onload = function() { 
    var txtField = document.getElementById('textField'); 

    if(!txtField.value) { 
     txtField.value = 'Default Text'; 
    } 
} 


<h:inputText id="txtField" value="#{bean.txtField}" 
    onfocus="window.default=this.value; this.value='';" 
    onblur="if(!this.value) { this.value = window.default; }"/> 

I En tout cas, je suggérerais de changer le window.onload à n'importe quelle fonction dom ready comme

document.observe('dom:loaded', function(){}); // Prototype 
$(document).ready(function(){}); // jQuery