Comment masquer automatiquement le texte de l’espace réservé lors de la mise au point en utilisant css ou jquery?

Ceci est fait automatiquement pour chaque navigateur sauf Chrome .

Je suppose que je dois cibler spécifiquement Chrome .

Des solutions?

Si ce n’est pas avec CSS , alors avec jQuery ?

 

Firefox 15 et IE 10+ le prennent également en charge. Pour développer 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; } 

avez-vous essayé l’atsortingbut réservé at?

  

-MODIFIER-

Je vois, essayez ceci alors:

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

-MODIFIER-

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:

  

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

Pure CSS Solution (pas de JS requirejs)

En s’appuyant sur les réponses de @Hexodus et @Casey Chu, voici une solution multi-navigateurs mise à jour qui exploite l’opacité et les transitions CSS pour supprimer le texte d’espace réservé. Il fonctionne pour tout élément pouvant utiliser des espaces réservés, y compris input balises textarea et 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 */ 

Edit: Mise à jour pour prendre en charge les navigateurs modernes.

Pour augmenter la réponse de @ casey-chu et pirate rob, voici une méthode plus compatible entre 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 l’ ID et utiliser explicitement input , de sorte que toutes les entrées avec placeholder obtiennent le comportement:

  

Notez que $(function(){ }); 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 nom et exécuter des éléments avec l’atsortingbut “espace réservé” …

 $("[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')); }); }); }; 

Pour affiner davantage le 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’atsortingbut de données.

Voir un exemple de travail ici dans jsFiddle .

J’aime l’approche css épicée de transitions. Sur le focus, l’espace réservé se fane;) Fonctionne également pour les zones de texte.

Merci @Casey Chu pour la bonne 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 !

Parfois, vous avez besoin de SPECIFICITY pour vous assurer que vos styles sont appliqués avec la plus forte id facteur Merci à @Rob Fletcher pour sa bonne réponse, dans notre société que nous avons utilisée

Donc, s’il vous plaît envisager d’append des styles préfixés avec 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; } 

Ce morceau de CSS a fonctionné pour moi:

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

Pour une solution purement 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 d’espace réservé sur le focus avec CSS de Ilia Raiskin.

HTML:

  

jQuery:

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

La démo est ici: 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"); }); }); 

2018> JQUERY v.3.3 SOLUTION: Fonctionne globalement pour toutes les entrées, textarea avec placeholder.

  $(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); }; }); }); 

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

Vous pouvez append un élément qui imite le palceholder. Ensuite, en utilisant javascript, contrôlez l’élément affiché et masqué.

Mais c’est tellement complexe, l’autre utilise le sélecteur de css du frère.

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

essayez cette fonction:

+ Il cache le PlaceHolder sur le focus et le restitue au flou

+ Cette fonction dépend du sélecteur d’espace réservé, elle sélectionne d’abord les éléments avec l’atsortingbut d’espace réservé, déclenche une fonction lors de la mise au point et une autre lors du flou.

on focus: ajoute un atsortingbut “data-text” à l’élément qui tire sa valeur de l’atsortingbut fictif, puis supprime la valeur de l’atsortingbut fictif.

on blur: retourne la valeur de l’espace réservé et la supprime de l’atsortingbut data-text

  
 $('[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 me suivre très bien si vous regardez ce qui se passe dans les coulisses en inspectant l’élément d’entrée

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

La même chose que j’ai appliquée en angular 5.

J’ai créé une nouvelle chaîne pour stocker un espace réservé

 newPlaceholder:ssortingng; 

alors j’ai utilisé des fonctions de mise au point et de flou sur la zone de saisie (j’utilise la saisie semi-automatique prime ng).

L’espace réservé ci-dessus est défini à partir de tapuscript

Deux fonctions que j’utilise –

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