web-dev-qa-db-fra.com

Comment effacer une zone de texte active?

En utilisant un formulaire simple avec une zone de texte, lorsque les utilisateurs cliquent sur la zone de texte, je souhaite que le contenu de la zone de texte soit effacé.

Est-ce possible?

javascriptjquerytextarea
35
CLiown
$('textarea#someTextarea').focus(function() {
   $(this).val('');
});
54
Jacob Relkin

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 retourne à la zone de texte.

Si vous souhaitez réinsérer le texte par défaut après leur départ (s'ils ne saisissent aucun texte), procédez comme suit:

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

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

});

Bien entendu, les exemples ci-dessus supposent que vous commencez par le balisage suivant:

<textarea>Default Text</textarea>

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

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

Bien que cela ne soit supporté que par les navigateurs compatibles. Mais il présente l’avantage supplémentaire de ne pas soumettre le texte fictif lors de la soumission du formulaire.

27
kingjeffrey

Ma suggestion est que vous ne supprimiez que le contenu initial par défaut sur le premier focus. Lors des focus ultérieurs, vous risquez de supprimer le contenu de l'utilisateur. Pour ce faire, il suffit de .unbind () le gestionnaire de focus après le premier clic:

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

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

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

Exemple jsFiddle


Notez que, puisque vous utilisez une textarea avec des balises ouvrantes et fermantes, vous pouvez utiliser $(this).text(""); ou $(this).html(""); ... textarea est sa valeur, vous pouvez également utiliser $(this).val(""); et $(this).attr("value", ""); ou même this.value = "";.

12
Peter Ajtai

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

Cela 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>
8
Sebastien

Quelques problèmes ici ne sont que partiellement traités dans les réponses actuelles:

  1. Vous devez effacer le texte lorsque l'utilisateur centre le champ.
  2. Vous voulez seulement l'effacer 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 soit effacé
  4. Vous voudrez peut-être permettre à l'utilisateur de soumettre le texte par défaut s'il décide de le saisir. Je ne sais pas pourquoi il voudrait le faire, mais s'il insiste pour le ressaisir, je m'adresse à eux. fais le.

En gardant ces détails à l'esprit, j'ajouterais une classe nommée "espace réservé" au champ et utiliserais quelque chose comme ce qui suit:

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

Validez que le nom de classe "espace réservé" a été supprimé lors de l'envoi du formulaire afin de garantir que l'utilisateur vraiment, vraiment souhaite soumettre un texte d'espace réservé stupide.

Si vous utilisez le plugin jQuery Validation , vous pouvez le mettre comme suit:

$.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();
    }
});
7
Wayne Burkett
jQuery(function($){
    $("textarea").focus(function(){
        $(this).val("");
    });
});
4
Álvaro González

Quelque chose comme ça?

$('textarea#myTextarea').focus(function() {
   if ($(this).val() == 'default text') {
      $(this).val('');
   }
});
0
redwall_hp

C'est possible et je pense que vous allez chercher un code qui peut le faire pour plus de textareas que l'un ...
Voici ce que j'utilise pour mon site:
Javascript: 

<script type='text/javascript'>
function RemoveText(NameEle)
{
    if ($('#' + NameEle) == 'default')
    {
        $('#' + NameEle).val('');
        $('#' + NameEle).text('');
        $('#' + NameEle).html('');
    }
}
function AddText(NameEle)
{
    if ($('#' + NameEle) == '')
    {
        $('#' + NameEle).val('default');
        $('#' + NameEle).text('default');
        $('#' + NameEle).html('default');
    }
}
</script>

HTML: 

<textarea cols='50' rows='3' onfocus='RemoveText(this)' onblur='AddText(this)' name='name' id='id'>default</textarea>
0
GuyFromOverThere
<textarea type="text" onblur="if ($(this).attr('value') == '') {$(this).val('The Default Text');}"  onfocus="if ($(this).attr('value') == 'The Default Text') {$(this).val('');}">The Default Text</textarea>
0
clickandboom

J'ai trouvé ça simplement

$('#myForm textarea').val('');

efface le formulaire dans Chrome mais cela ne fonctionnait pas pour Firefox (6.x). La valeur était vide dans Firebug mais le texte précédent était toujours affiché dans la zone de texte. Pour contourner cela, je sélectionne et reconstruis les zones de texte une à la fois:

$('#' + formId + ' textarea').each(function(i){
textareaVal = $(this).parent().html();
$(this).parent().html(textareaVal);   
});

Ceci termine le travail dans Firefox et ne rompt pas Chrome. Il passera en revue toutes les zones de texte sous une forme, une par une. Fonctionne dans tous les autres navigateurs (Opera, Safari, même IE).

0
Chris Adams