Comment masquer automatiquement le texte de l'espace réservé lors de la mise au point à l'aide de CSS ou de JQuery?


213

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.


cehck ma modification alors, cela pourrait aider
Toni Michel Caubet

Opera est également un autre navigateur qui supprime l'espace réservé sur le focus.
Lucas

Firefox à partir de la version 15 ne supprime plus le texte d'espace réservé jusqu'à ce que vous commenciez à taper. Je crois que la même chose peut être le cas pour IE10 mais je n'ai aucun moyen de le vérifier.
Rob Fletcher

1
Je crains que personne ne mentionne le fait que vous ne devriez pas prendre la peine de modifier les comportements des navigateurs natifs. Pour ma part, je préfère que l'espace réservé reste présent. Cela m'aide simplement en tant qu'utilisateur final, et c'est une fonctionnalité que les navigateurs commencent maintenant à implémenter ... probablement parce que le comportement de disparition sur le focus s'est avéré être un problème d'utilisation. Laissez le navigateur être, s'il vous plaît.
Ryan Wheale

"Cela se fait automatiquement pour tous les navigateurs sauf Chrome." Plus maintenant? Je viens d'essayer cela sur OSX dans Firefox 37.0.2, Safari 7.1.5 et Chrome 42.0. Aucun d'eux ne supprime le texte d'espace réservé jusqu'à ce que je commence à taper, et tous le remettent lorsque j'efface le champ.
Nathan Long

Réponses:


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

2
Cela le fait aller mais quand je clique hors du champ, il reste vide.
LondonGuy

2
@LondonGuy: Je viens de modifier mon article, voyez si cela fonctionne comme vous le vouliez. Mais la solution de Toni Michel Caubet est plus agréable
MatuDuke

9
Le problème ici est que c'est du JavaScript envahissant. La solution de Toni Michel Caubet est meilleure.
Silkster

Je l'aime bien, mais malheureusement ça ne marche ni IE ni Safari.
Mohammed Moustafa


455

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

1
Très bonne réponse! Je ne vois pas beaucoup de sens à abandonner mon ancienne solution jQuery en faveur de HTML5, puis allez de l'avant et ajoutez le JavaScript en tant que correctif. C'est juste la solution que je cherchais.
nienn

@MartinHunt avez-vous essayé cela sur FF? input: focus :: - moz-placeholder
Philip

16
Toutes mes excuses pour avoir remonté un vieux fil, mais juste pour le rendre plus complet: input: focus: -moz-placeholder est pour Firefox 18 et ci-dessous, pour 19 et après, vous devez utiliser: input: focus :: - moz-placeholder (note le double colon). Ref: css-tricks.com/snippets/css/style-placeholder-text
Peter Lewis

ce commentaire est une victoire. fonctionne avec des contrôles dynamiques, comme le kendo aussi
reflog

1
Grande réponse aussi de moi! Pour ceux d'entre nous qui pourraient également avoir besoin de cette fonctionnalité lorsque le champ est désactivé, voici le code CSS: / * Masquer le texte de l'espace réservé (le cas échéant), lorsque le champ d'attente est désactivé * / input: disabled :: - webkit-input- espace réservé {couleur: transparent; } entrée: désactivé: -moz-placeholder {couleur: transparent; } entrée: désactivé :: - moz-placeholder {couleur: transparent; } entrée: désactivée: -ms-input-placeholder {couleur: transparent; }
Ramanagom

74

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

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

1
J'aime cette réponse, mais le support du navigateur pour cela n'est pas encore là.
Jerry

44

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.


6
La meilleure solution CSS!
Fatih SARI

Bon vieux CSS ... grande solution simple! Pourquoi n'y ai-je pas pensé ??
JI-Web

40

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/


C'est agréable de voir l'attribut de données utilisé. Mais je regarderais l'équivalent CSS. Une fois mis en cache, ce sera une solution plus rapide et peut être globale. Pour ce qui précède, l'attribut data doit être placé sur chaque élément nécessaire. (réponse ci-dessous)
Neil

1
C'est trop compliqué. Pourrait être fait avec beaucoup moins de code.
JGallardo

@JGallardo montre-moi la lumière (mais je ne sais pas si tu as vu qu'il y a 3 solutions différentes)
Toni Michel Caubet

19

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

Exactement ce que j'ai écrit maintenant (à la place, j'ai utilisé opacity:0;)! La seule solution CSS dans ce fil avec tous les supports de navigateur possibles!
ReynekeVosz

11

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.


3
Cela ne fonctionne pas si vous avez plusieurs champs. Voici la version améliorée de votre code jsfiddle.net/6CzRq/64
svlada

10

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

5

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


5

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

4

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 .


4

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

4

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 !


3

Ce morceau de CSS a fonctionné pour moi:

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

}

1
C'est une belle façon de le faire sans JQuery :)
tehX


2

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

1
Cela suppose une seule entrée.
nym

2

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

1

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

        });

}

utilisez plutôt $ ("input [placeholder]") pour sélectionner uniquement les champs qui ont un attribut d'espace réservé.
Silkster

C'est la meilleure réponse, simple, et désélectionne les autres lorsqu'elle
n'est pas au

1

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

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

0

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.


Veuillez vérifier cette URL, il sera utile d'améliorer la qualité de votre contenu;
Willie Cheng

0

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


0

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

0

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...'">

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

Cette réponse est identique à une réponse précédente. Si vous avez quelque chose à ajouter ou à améliorer, veuillez suggérer une modification de la réponse d'origine.
JonathanDavidArndt
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.