Comment puis-je masquer automatiquement le texte de l'espace réservé sur focus à l'aide de css ou jquery?

Question

Ceci est fait automatiquement pour tous les navigateurs sauf chrome..

Je devine que je dois cibler spécifiquement chrome.

Toutes les solutions?

Si ce n'est avec css jquery?

Cordialement

Answer 1

Firefox 15 et IE 10+ prend également en charge maintenant. Pour développer sur @casey-chu CSS solution ci-dessus:

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+ */

Answer 2

EDIT:

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

Answer 3

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

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

Answer 4

avez-vous essayé de l'espace réservé attr?

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

-EDIT-

je vois, essayer ce alors, sur $(document).ready()

$(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/

Answer 5

Pour augmenter @casey-chu de et pirate de rob réponse, voici un autre de la croix-navigateur compatible:

    /* 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; }