Comment effacer une zone de texte en cas de mise au point ?

Question

J'utilise un formulaire simple avec une zone de texte. Lorsque l'utilisateur clique sur la zone de texte, je veux que le contenu de la zone de texte soit effacé.

Est-ce possible ?

Answer 1

$('textarea#someTextarea').focus(function() {
   $(this).val('');
});

Answer 2

Si vous voulez seulement supprimer le texte par défaut (s'il existe), essayez ceci :

$("textarea").focus(function() {

    if( $(this).val() == "Default Text" ) {
        $(this).val("");
    }

});

En testant le texte par défaut, vous n'effacerez pas le texte saisi par l'utilisateur s'il revient dans la zone de texte.

Si vous souhaitez réinsérer le texte par défaut après leur départ (s'ils n'ont pas saisi de texte), procédez comme suit :

$("textarea").blur(function() {

    if( $(this).val() == "" ) {
        $(this).val("Default Text");
    }

});

Bien sûr, les exemples ci-dessus supposent que vous commencez avec le balisage suivant :

<textarea>Default Text</textarea>

Si vous souhaitez utiliser le texte de remplacement de manière sémantique, vous pouvez utiliser la nouvelle propriété HTML5 :

<textarea placeholder="Default Text"></textarea>

Bien que cela ne soit pris en charge que par les navigateurs compétents. Mais elle présente l'avantage supplémentaire de ne pas soumettre le texte de l'espace réservé à la soumission du formulaire.

Answer 3

Je vous suggère de ne supprimer le contenu initial par défaut que lors de la première mise au point. Lors des mises au point suivantes, vous risquez de supprimer le contenu utilisateur. Pour ce faire, il suffit de .unbind() le gestionnaire du focus après le premier clic :

$("textarea").focus(function(event) {

      // Erase text from inside textarea
    $(this).text("");

      // Disable text erase
    $(this).unbind(event);
});

Exemple de jsFiddle

---

À titre d'information, puisque vous utilisez un textarea qui a des balises ouvertes et fermées, vous pouvez utiliser $(this).text(""); o $(this).html(""); ... et, puisque le texte à l'intérieur d'un fichier textarea est sa valeur, vous pouvez également utiliser $(this).val(""); y $(this).attr("value", ""); ou même this.value = ""; .

Answer 4

HTML5 offre une solution plus élégante à ce problème : l'attribut "placeholder".

Il créera un texte en arrière-plan de votre zone de texte qui n'apparaîtra que lorsque la zone de texte est vide.

<textarea placeholder="Enter some text !"></textarea>

Answer 5

Il y a quelques questions ici qui ne sont que partiellement abordées dans les réponses actuelles :

1. Vous devez effacer le texte lorsque l'utilisateur se concentre sur le champ.
2. Vous ne voulez l'effacer que la première fois que l'utilisateur clique sur le champ.
3. Vous ne voulez pas que l'utilisateur puisse soumettre le texte par défaut avant qu'il n'ait été effacé.
4. Vous pouvez autoriser l'utilisateur à soumettre le texte par défaut s'il décide de le retaper. Je n'ai aucune idée de la raison pour laquelle il voudrait faire cela, mais s'il insiste pour le retaper, je penche pour le laisser faire.

Avec ces détails en tête, j'ajouterais une classe nommée "placeholder" au champ et j'utiliserais quelque chose comme ce qui suit :

$("form textarea.placeholder").focus(function(e) {
    $(this).text("");
    $(this).removeClass("placeholder");
    $(this).unbind(e);
});

Valider que le nom de classe "placeholder" a été supprimé lors de la soumission du formulaire pour garantir que l'utilisateur vraiment , vraiment veut soumettre un stupide texte de remplacement.

Si vous utilisez le Plugin de validation jQuery puis vous pouvez assembler le tout comme ceci :

$.validator.addMethod("isCustom", function(value, element) {
    return !$(element).hasClass("placeholder");
});

$(form).validate({
    rules: {
        message: {
            required: true,
            isCustom: true
        }
    },
    messages: {
        message: "Message required, fool!"
    },
    submitHandler: function(form) {
        $(form).find(":submit").attr("disabled", "disabled");   
        form.submit();
    }
});