Cela se fait automatiquement pour tous les navigateurs sauf Chrome .

Je suppose que je dois cibler spécifiquement Chrome .

Des solutions?

Sinon avec CSS , alors avec jQuery ?

Sincères amitiés.

<input 
type="text" 
placeholder="enter your text" 
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />

Modifier: tous les navigateurs prennent en charge maintenant

input:focus::placeholder {
  color: transparent;
}

<input type="text" placeholder="Type something here!">

Firefox 15 et IE 10+ le prennent également en charge maintenant. Pour étendre la solution CSS de Casey Chu :

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

Voici une solution CSS uniquement (pour l'instant, ne fonctionne que dans WebKit):

input:focus::-webkit-input-placeholder {
    opacity: 0;
}

Solution CSS pure (aucun JS requis)

S'appuyant sur les réponses de @Hexodus et @Casey Chu, voici une solution mise à jour et multi-navigateur qui exploite l'opacité CSS et les transitions pour estomper le texte de l'espace réservé. Il fonctionne pour tout élément pouvant utiliser des espaces réservés, y compris les balises textareaet input.

::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome <=56, Safari < 10 */
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */

*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */

Modifier: mis à jour pour prendre en charge les navigateurs modernes.

avez-vous essayé attr d'espace réservé?

<input id ="myID" type="text" placeholder="enter your text " />

-ÉDITER-

Je vois, essayez ceci:

$(function () {

    $('#myId').data('holder', $('#myId').attr('placeholder'));

    $('#myId').focusin(function () {
        $(this).attr('placeholder', '');
    });
    $('#myId').focusout(function () {
        $(this).attr('placeholder', $(this).data('holder'));
    });


});

Test: http://jsfiddle.net/mPLFf/4/

-ÉDITER-

En fait, puisque l'espace réservé doit être utilisé pour décrire la valeur, pas le nom de l'entrée. Je suggère l'alternative suivante

html:

<label class="overlabel"> 
    <span>First Name</span>
    <input name="first_name" type="text" />
</label>

javascript:

$('.overlabel').each(function () {
    var $this = $(this);
    var field = $this.find('[type=text], [type=file], [type=email], [type=password], textarea');
    var span = $(this).find('> span');
    var onBlur = function () {
        if ($.trim(field.val()) == '') {
            field.val('');
            span.fadeIn(100);
        } else {
            span.fadeTo(100, 0);
        }
    };
    field.focus(function () {
        span.fadeOut(100);
    }).blur(onBlur);
    onBlur();
});

css:

.overlabel {
  border: 0.1em solid;
  color: #aaa;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  min-height: 2.2em;
}
.overlabel span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overlabel span, .overlabel input {
  text-align: left;
  font-size: 1em;
  line-height: 2em;
  padding: 0 0.5em;
  margin: 0;
  background: transparent;
  -webkit-appearance: none; /* prevent ios styling */
  border-width: 0;
  width: 100%;
  outline: 0;
}

Tester:

http://jsfiddle.net/kwynwrcf/

Pour augmenter la réponse de @ casey-chu et de pirate rob, voici un moyen plus compatible avec tous les navigateurs:

    /* WebKit browsers */
input:focus::-webkit-input-placeholder { color:transparent; }

    /* Mozilla Firefox 4 to 18 */
input:focus:-moz-placeholder { color:transparent; }

    /* Mozilla Firefox 19+ */
input:focus::-moz-placeholder { color:transparent; }

    /* Internet Explorer 10+ */
input:focus:-ms-input-placeholder { color:transparent; }

La réponse de Toni est bonne, mais je préfère laisser tomber IDet utiliser explicitement input, de cette façon, toutes les entrées avec placeholderle comportement:

<input type="text" placeholder="your text" />

Notez que $(function(){ });c'est le raccourci pour $(document).ready(function(){ });:

$(function(){
    $('input').data('holder',$('input').attr('placeholder'));
    $('input').focusin(function(){
        $(this).attr('placeholder','');
    });
    $('input').focusout(function(){
        $(this).attr('placeholder',$(this).data('holder'));
    });
})

Démo.

J'aime emballer cela dans l'espace de noms et exécuter des éléments avec l'attribut "placeholder" ...

$("[placeholder]").togglePlaceholder();

$.fn.togglePlaceholder = function() {
    return this.each(function() {
        $(this)
        .data("holder", $(this).attr("placeholder"))
        .focusin(function(){
            $(this).attr('placeholder','');
        })
        .focusout(function(){
            $(this).attr('placeholder',$(this).data('holder'));
        });
    });
};

Parfois, vous avez besoin de SPÉCIFICITÉ pour vous assurer que vos styles sont appliqués avec le facteur le plus fort idMerci pour @Rob Fletcher pour sa grande réponse, dans notre entreprise, nous avons utilisé

Veuillez donc envisager d'ajouter des styles préfixés par l'ID du conteneur d'application

    #app input:focus::-webkit-input-placeholder, #app  textarea:focus::-webkit-input-placeholder {
        color: #FFFFFF;
    }

    #app input:focus:-moz-placeholder, #app textarea:focus:-moz-placeholder {
        color: #FFFFFF;
    }

Avec Pure CSS, cela a fonctionné pour moi. Rendez-le transparent lors de l'entrée / Focues en entrée

 input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: transparent !important;
 }
 input:focus::-moz-placeholder { /* Firefox 19+ */
   color: transparent !important;
 }
 input:focus:-ms-input-placeholder { /* IE 10+ */
   color: transparent !important;
 }
 input:focus:-moz-placeholder { /* Firefox 18- */
   color: transparent !important;
  }

Pour affiner davantage l'exemple de code de Wallace Sidhrée :

$(function()
{  
      $('input').focusin(function()
      {
        input = $(this);
        input.data('place-holder-text', input.attr('placeholder'))
        input.attr('placeholder', '');
      });

      $('input').focusout(function()
      {
          input = $(this);
          input.attr('placeholder', input.data('place-holder-text'));
      });
})

Cela garantit que chaque entrée stocke le texte d'espace réservé correct dans l'attribut de données.

Voir un exemple de travail ici dans jsFiddle .

J'aime l'approche CSS épicée de transitions. Sur Focus, l'espace réservé s'estompe;) Fonctionne également pour les zones de texte.

Merci @Casey Chu pour cette excellente idée.

textarea::-webkit-input-placeholder, input::-webkit-input-placeholder { 
    color: #fff;
    opacity: 0.4;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s; 
}

textarea:focus::-webkit-input-placeholder, input:focus::-webkit-input-placeholder  { 
    opacity: 0;
}

En utilisant SCSS avec http://bourbon.io/ , cette solution est simple, élégante et fonctionne sur tous les navigateurs Web:

input:focus {
  @include placeholder() {
    color: transparent;
  }
}

Utilisez Bourbon! C'est bon pour toi !

Ce morceau de CSS a fonctionné pour moi:

input:focus::-webkit-input-placeholder {
        color:transparent;

}

Pour une solution 100% CSS:

input:focus::-webkit-input-placeholder  {color:transparent;}
input:focus::-moz-placeholder   {color:transparent;}
input:-moz-placeholder   {color:transparent;}

Remarque: pas encore pris en charge par tous les fournisseurs de navigateurs.

Référence: Masquer le texte de l'espace réservé sur le focus avec CSS par Ilia Raiskin.

HTML:

<input type="text" name="name" placeholder="enter your text" id="myInput" />

jQuery:

$('#myInput').focus(function(){
  $(this).attr('placeholder','');
});
$('#myInput').focusout(function(){
  $(this).attr('placeholder','enter your text');
});

2018> SOLUTION JQUERY v.3.3: fonctionne globalement pour toutes les entrées, zone de texte avec espace réservé.

 $(function(){
     $('input, textarea').on('focus', function(){
        if($(this).attr('placeholder')){
           window.oldph = $(this).attr('placeholder');
            $(this).attr('placeholder', ' ');
        };
     });

     $('input, textarea').on('blur', function(){
       if($(this).attr('placeholder')){
            $(this).attr('placeholder', window.oldph);
         };
     }); 
});

La démo est là: jsfiddle

Essaye ça :

//auto-hide-placeholder-text-upon-focus
if(!$.browser.webkit){
$("input").each(
        function(){
            $(this).data('holder',$(this).attr('placeholder'));
            $(this).focusin(function(){
                $(this).attr('placeholder','');
            });
            $(this).focusout(function(){
                $(this).attr('placeholder',$(this).data('holder'));
            });

        });

}

pour entrée

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }

pour textarea

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }

$("input[placeholder]").focusin(function () {
    $(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
    $(this).attr('placeholder', $(this).data('place-holder-text'));
});

$("input[placeholder]").each(function () {
    $(this).attr("data-placeholder", this.placeholder);

    $(this).bind("focus", function () {
        this.placeholder = '';
    });
    $(this).bind("blur", function () {
        this.placeholder = $(this).attr("data-placeholder");
    });
});

Outre tout ce qui précède, j'ai deux idées.

Vous pouvez ajouter un élément qui imite le titulaire de la palette. Ensuite, à l'aide du contrôle javascript, l'élément s'affiche et se cache.

Mais c'est tellement complexe, l'autre utilise le sélecteur de frère du CSS, juste comme ceci:

.placeholder { position: absolute; font-size: 14px; left: 40px; top: 11px; line-height: 1; pointer-events: none; }
.send-message input:focus + .placeholder { display: none; } 

23333, j'ai un mauvais anglais. J'espère résoudre votre problème.

essayez cette fonction:

+ Il cache la placeHolder sur le focus et le renvoie sur le flou

+ Cette fonction dépend du sélecteur d'espace réservé, d'abord elle sélectionne les éléments avec l'attribut d'espace réservé, déclenche une fonction sur la mise au point et une autre sur le flou.

focus: il ajoute un attribut "data-text" à l'élément qui tire sa valeur de l'attribut d'espace réservé puis il supprime la valeur de l'attribut d'espace réservé.

sur flou: il retourne la valeur de l'espace réservé et la supprime de l'attribut data-text

<input type="text" placeholder="Username" />

$('[placeholder]').focus(function() {
    $(this).attr('data-text', $(this).attr('placeholder'));
    $(this).attr('placeholder', '');
  }).blur(function() {
      $(this).attr('placeholder', $(this).attr('data-text'));
      $(this).attr('data-text', '');
  });
});

vous pouvez très bien me suivre si vous regardez ce qui se passe dans les coulisses en inspectant l'élément d'entrée

La même chose que j'ai appliquée en angulaire 5.

j'ai créé une nouvelle chaîne pour stocker l'espace réservé

newPlaceholder:string;

puis j'ai utilisé les fonctions de mise au point et de flou sur la zone de saisie (j'utilise la saisie semi-automatique principale ng).

L'espace réservé ci-dessus est défini à partir de la frappe

J'utilise deux fonctions -

/* Event fired on focus to textbox*/
Focus(data) {
    this.newPlaceholder = data.target.placeholder;
    this.placeholder = '';
}
/* Event fired on mouse out*/
Blur(data) {
    this.placeholder = this.newPlaceholder;
}

Pas besoin d'utiliser de CSS ou de JQuery. Vous pouvez le faire directement à partir de la balise d'entrée HTML.

Par exemple , dans la boîte de messagerie ci-dessous, le texte de l'espace réservé disparaîtra après avoir cliqué à l'intérieur et le texte réapparaîtra si vous cliquez dessus.

<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">

/* Webkit */
[placeholder]:focus::-webkit-input-placeholder { opacity: 0; }
/* Firefox < 19 */
[placeholder]:focus:-moz-placeholder { opacity: 0; }
/* Firefox > 19 */
[placeholder]:focus::-moz-placeholder { opacity: 0; }
/* Internet Explorer 10 */
[placeholder]:focus:-ms-input-placeholder { opacity: 0; }