2011-02-04 6 views
2

J'ai déjà une zone de texte qui contient déjà un texte pour que les utilisateurs sachent ce qui est censé y figurer. Je l'ai déjà configuré en cliquant dessus pour sélectionner tout le texte. Ce que je veux savoir si comment je peux le faire en cliquant sur la zone de texte va effacer tout le texte. De même, si l'utilisateur supprime tout ce qu'il a écrit, comment puis-je faire apparaître le texte original?Remplacer automatiquement le texte dans la zone de texte HTML

Un exemple parfait de ce que je veux faire est la zone de texte pour le titre lorsque vous posez une question ici sur Stack Overflow.

Répondre

3

Avec le code ci-dessous vous pouvez simplement ajouter la classe "clear" à n'importe quel élément d'entrée ou textarea et cela effacera la valeur initiale !!!

<!DOCTYPE html>  
<html> 
    <head> 
    <title>Sample</title> 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script> 
    <script> 
    $(function() { 
     $('.clear').one('focus', function() { 
     this.value = ''; 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <input type="text" value="Full Name" class="clear"/> <br /> 
    <input type="text" value="Email" class="clear"/> <br /> 
    <textarea value="About you..." class="clear"></textarea> 
    </body> 
    </html> 
+1

Je suis un débutant à cela, cela vous dérangerait-il d'expliquer? Merci beaucoup! – Teknophilia

+0

Bien sûr, utilisez-vous une bibliothèque Javascript comme JQuery? Cela rendrait les tâches de ce genre beaucoup plus efficaces et plus faciles à faire. Si vous le souhaitez, je vais changer la réponse pour accomplir une solution complète en utilisant JQuery – Paul

+0

@Teknophilia - cela a-t-il fonctionné pour vous? – Paul

0

La zone de texte que vous avez créée doit avoir un identifiant associé dans la variable. L'ID de zone de texte ressemblerait à ceci:

<textarea id="someId"...> 

Où "someId" serait le nom que vous lui donneriez. Ensuite, lorsque vous utilisez le code suivant

document.getElementById('someId').value = ''; 

il remplacera le texte dans la zone avec le texte spécifié par la fonction ci-dessus. Dans ce cas, il va le remplacer par aucun texte. Assurez-vous simplement qu'il ne le fait qu'une seule fois, sinon, lorsque vous cliquez à l'extérieur de la boîte, puis cliquez de nouveau à l'intérieur, la saisie de l'utilisateur sera également effacée.

1

rapide et sale, mais fait le travail:

<input type="text" value="init..." onfocus="this.value=''; this.onfocus=null;" /> 

Hope this helps!

Questions connexes