web-dev-qa-db-fra.com

Comment masquer automatiquement le texte d'espace réservé sur le focus en utilisant css ou jquery?

Cela se fait automatiquement pour tous les navigateurs sauf Chrome .

Je suppose que je dois cibler spécifiquement Chrome .

Des solutions?

Si ce n'est pas avecCSS, alors avec jQuery ?

jquerycsshtml5google-chromeplaceholder
183
LondonGuy
<input 
type="text" 
placeholder="enter your text" 
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />
221
MatuDuke

Firefox 15 et IE 10+ prennent également en charge cette fonctionnalité maintenant. 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+ */
388
Rob Fletcher

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

input:focus::-webkit-input-placeholder {
    opacity: 0;
}
71
Casey Chu

avez-vous essayé placeholder attr?

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

-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:

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

40
Toni Michel Caubet

Pure CSS Solution (aucun JS requis)

S'appuyant sur les réponses de @Hexodus et de @Casey Chu, voici une solution mise à jour et multi-navigateurs qui exploite l'opacité CSS et les transitions pour estomper le texte d'espace réservé. Cela fonctionne pour tout élément pouvant utiliser des espaces réservés, y compris les 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: mis à jour pour prendre en charge les navigateurs modernes.

31
JamesWilson

Pour augmenter la réponse de @ casey-chu's et pirate rob, voici une méthode plus compatible avec 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; }
18
Adrian Föder

La réponse de Toni est bonne, mais je préfère laisser tomber la ID et utiliser explicitement input. Ainsi, toutes les entrées avec placeholder auront le comportement suivant:

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

Notez que $(function(){ }); est l’abréviation de $(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.

11
Wallace Sidhrée

J'aime emballer cela dans l'espace de nom et utiliser des éléments avec l'attribut "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'));
        });
    });
};
9
martinedwards

Parfois, vous avez besoin deSP&EACUTE;CIFICIT&EACUTE;pour vous assurer que vos styles sont appliqués avec le facteur le plus puissant id Merci pour @Rob Fletcher pour sa réponse géniale;

Alors s'il vous plaît envisager d'ajouter des styles préfixés avec l'id du conteneur de l'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;
    }

5
Mahdi Alkhatib

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 de substitution correct dans l'attribut de données.

Voir un exemple de travail ici dans jsFiddle .

4
truetone

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 !

4
Michael

J'aime l'approche css pimentée de transitions. Sur Focus, l'espace réservé s'estompe;) Fonctionne également pour textareas.

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;
}
4
Hexodus

Avec Pure CSS, cela a fonctionné pour moi. Rendez-le transparent lorsque vous êtes entré/focus 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;
  }
3
Muhammad Bilawal

Pour une solution basée 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 de substitution sur le focus avec CSS par Ilia Raiskin.

3
Toran Billups

Ce morceau de CSS a fonctionné pour moi: 

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

}
3
Alex Bondor

2018> JQUERY v.3.3 SOLUTION: Travailler 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);
         };
     }); 
});
2
Karel Sniper Žák

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');
});
2
Uffo

pour l'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; }
1
Wagh

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'));
            });

        });

}
1
Suresh Pattu
$("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");
    });
});
1
hadi
$("input[placeholder]").focusin(function () {
    $(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
    $(this).attr('placeholder', $(this).data('place-holder-text'));
});
1
OsBen

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

Vous pouvez ajouter un élément qui imite le détenteur de la partition. Ensuite, utilisez le javascript pour contrôler l'affichage et le masquage de l'élément.

Mais c'est tellement complexe, l'autre utilise le sélecteur de frère de 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.

0
dufemeng

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

Par exemple , Dans la boîte de courrier électronique ci-dessous, le texte de substitution disparaît après un clic à l'intérieur et le texte réapparaît si vous cliquez à l'extérieur.

<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">
0
Saiful Islam
/* 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; }
0
Maicon Perin

essayez cette fonction:

+ Il cache le PlaceHolder sur le focus et le retourne sur le flou

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

on focus: il ajoute un attribut "data-text" à l'élément qui tire sa valeur de l'attribut de marque de réservation, puis supprime la valeur de l'attribut de marque de réservation.

on blur: renvoie la valeur de marque de réservation 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

0
Wael Assaf

La même chose que j'ai appliquée dans angular 5.

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

newPlaceholder:string;

ensuite, j'ai utilisé les fonctions de focus et de flou sur la zone de saisie (j'utilise d'abord l'auto-complétion).

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

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;
}
0
Rohit Grover