Come faccio a nascondere automaticamente il testo segnaposto al momento dello stato attivo utilizzando CSS o JQUERY?

226

Questo viene fatto automaticamente per tutti i browser eccetto Chrome .

Immagino di dover scegliere come target Chrome in modo specifico .

Eventuali soluzioni?

Se non con CSS , allora con jQuery ?

Cordiali saluti.

jquery  css  html  google-chrome  placeholder 
— LondonGuy
fonte
lascia la mia modifica quindi, potrebbe aiutare
— Toni Michel Caubet
Opera è anche un altro browser che rimuove il segnaposto in primo piano.
— Lucas
Firefox a partire dalla versione 15 non rimuove più il testo segnaposto fino a quando non inizi a digitare. Credo che lo stesso possa essere il caso di IE10 ma non ho un modo per verificarlo.
— Rob Fletcher
1
Sono preoccupato che nessuno abbia menzionato il fatto che non dovresti preoccuparti di modificare i comportamenti del browser nativo. Io per primo preferisco che il segnaposto rimanga presente. Mi aiuta solo come utente finale ed è una funzionalità che i browser stanno ora iniziando a implementare ... probabilmente perché il comportamento di scomparsa al fuoco si è rivelato un problema di usabilità. Lascia che sia il browser, per favore.
— Ryan Wheale
"Questo viene fatto automaticamente per tutti i browser tranne Chrome." Non più? L'ho appena provato su OSX in Firefox 37.0.2, Safari 7.1.5 e Chrome 42.0. Nessuno di loro rimuove il testo segnaposto fino a quando non inizio a digitare e tutti lo rimettono a posto quando pulisco il campo.
— Nathan Long,

Risposte:

271 
<input 
type="text" 
placeholder="enter your text" 
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />
— MatuDuke
fonte
2
Questo lo fa andare ma quando faccio clic fuori dal campo rimane vuoto.
— LondonGuy
2
@ LondonGuy: ho appena modificato il mio post, vedi se funziona come volevi. Ma la soluzione di Toni Michel Caubet è più bella
— MatuDuke
9
Il problema qui è che si tratta di JavaScript invadente. La soluzione di Toni Michel Caubet è migliore.
— Silkster
Mi piace, ma sfortunatamente non funziona né IE né Safari.
— Mohammed Moustafa
— io il
474

Modifica: tutti i browser ora supportano

input:focus::placeholder {
  color: transparent;
}
<input type="text" placeholder="Type something here!">
Espandi lo snippet

Firefox 15 e IE 10+ ora supportano anche questo. Per espandere la soluzione CSS di 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+ */
— Rob Fletcher
fonte
1
Bella risposta! Non vedo molto senso abbandonare la mia vecchia soluzione jQuery a favore di HTML5 e poi andare avanti e aggiungere nuovamente JavaScript come soluzione. Questa è solo la soluzione che stavo cercando.
— nienn
@MartinHunt l'hai provato su FF? input: focus :: - moz-placeholder
— Philip
16
Mi scuso per il dragaggio di un vecchio thread, ma solo per renderlo più completo: input: focus: -moz-placeholder è per Firefox 18 e sotto, per 19 in poi devi usare: input: focus :: - moz-placeholder (nota il doppio colon). Ref: css-tricks.com/snippets/css/style-placeholder-text
— Peter Lewis
questo commento è una vittoria. funziona con i controlli dinamici, come anche il kendo
— reflog
1
Ottima risposta anche da parte mia! Per quelli di noi che potrebbero richiedere questa funzionalità anche quando il campo è disabilitato, ecco il codice CSS: / * Nasconde il testo segnaposto (se presente), quando il campo di trattenimento è disabilitato * / input: disabled :: - webkit-input- segnaposto {colore: trasparente; } input: disabilitato: -moz-placeholder {color: transparent; } input: disabled :: - moz-placeholder {color: transparent; } input: disabilitato: -ms-input-placeholder {color: transparent; }
— Ramanagom
77

Ecco una soluzione solo CSS (per ora, funziona solo in WebKit):

input:focus::-webkit-input-placeholder {
    opacity: 0;
}
— Casey Chu
fonte
1
Mi piace questa risposta, ma il supporto del browser per questo non è ancora disponibile.
— Jerry
46

Soluzione CSS pura (non è richiesto JS)

Basandosi sulle risposte di @Hexodus e @Casey Chu, ecco una soluzione aggiornata e cross-browser che sfrutta l'opacità CSS e le transizioni per sfumare il testo segnaposto. Funziona per qualsiasi elemento che può utilizzare segnaposto, inclusi textareae inputtag.

::-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 */
<div>
  <div><label for="a">Input:</label></div>
  <input id="a" type="text" placeholder="CSS native fade out this placeholder text on click/focus" size="60">
</div>

<br>

<div>
  <div><label for="b">Textarea:</label></div>
  <textarea id="b" placeholder="CSS native fade out this placeholder text on click/focus" rows="3"></textarea>
</div>
Espandi lo snippet

Revisioni

  • Modifica 1 (2017): aggiornato per supportare i browser moderni.
  • Modifica 2 (2020): aggiunto lo Stack Snippet eseguibile.
— JamesWilson
fonte
6
La migliore soluzione CSS!
— Fatih SARI
Buon vecchio CSS ... ottima soluzione semplice! Perché non ci ho pensato ??
— JI-Web
40

hai provato segnaposto attr?

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

-MODIFICARE-

Capisco, prova questo allora:

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

-MODIFICARE-

In realtà, poiché il segnaposto dovrebbe essere utilizzato per descrivere il valore, non il nome dell'input. Suggerisco la seguente alternativa

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

Test:

http://jsfiddle.net/kwynwrcf/

— Toni Michel Caubet
fonte
Bello vedere l'attributo di dati utilizzato. Ma guarderei l'equivalente CSS. Una volta memorizzato nella cache, sarà una soluzione più veloce e può essere globale. Quanto sopra richiede che l'attributo data sia posizionato su ogni elemento necessario. (risposta sotto)
— Neil
1
Questo è troppo complicato. Potrebbe essere fatto con molto meno codice.
— JGallardo,
@JGallardo fammi vedere la luce (ma non sono sicuro se hai visto che ci sono 3 soluzioni diverse)
— Toni Michel Caubet
19

Per aumentare la risposta di @ casey-chu e pirata rob, ecco un modo più compatibile con più browser:

    /* 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; }
— Adrian Föder
fonte
Esattamente quello che ho scritto ora (invece che ho usato opacity:0;)! L'unica soluzione CSS in questo thread con tutti i possibili supporti per browser!
— ReynekeVosz
12

La risposta di Toni è buona, ma preferirei abbandonare IDe utilizzare esplicitamente input, in questo modo tutti gli input placeholderottengono il comportamento:

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

Nota che $(function(){ });è l'abbreviazione per $(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'));
    });
})

Demo.

— Wallace Sidhrée
fonte
3
Questo non funziona se hai più di un campo. Ecco la versione migliorata del tuo codice jsfiddle.net/6CzRq/64
— svlada
10

Mi piace impacchettarlo nello spazio dei nomi ed eseguire su elementi con l'attributo "segnaposto" ...

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

A volte hai bisogno di SPECIFICITÀ per assicurarti che i tuoi stili vengano applicati con il fattore più forte idGrazie a @Rob Fletcher per la sua ottima risposta, nella nostra azienda abbiamo

Quindi, considera l'aggiunta di stili con prefisso con l'id del contenitore dell'app

    #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;
    }
Espandi lo snippet

— Mahdi Alkhatib
fonte
5

Con Pure CSS ha funzionato per me. Renderlo trasparente quando inserito / Focues in input

 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;
  }
— Muhammad Bilawal
fonte
4

Per perfezionare ulteriormente l' esempio di codice di 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'));
      });
})

Ciò garantisce che ogni input memorizzi il testo segnaposto corretto nell'attributo data.

Guarda un esempio funzionante qui in jsFiddle .

— truetone
fonte
4

Mi piace l'approccio CSS condito con le transizioni. Su Focus il segnaposto si dissolve;) Funziona anche per le aree di testo.

Grazie @Casey Chu per l'ottima idea.

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

Utilizzando SCSS insieme a http://bourbon.io/ , questa soluzione è semplice, elegante e funziona su tutti i browser web:

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

Usa Bourbon! È buono per te !

— Michael
fonte
3

Questo pezzo di CSS ha funzionato per me: 

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

}
— Alex Bondor
fonte
1
Questo è un bel modo per farlo senza JQuery :)
— tehX
3

Per una soluzione basata su CSS puro: 

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

Nota: non ancora supportato da tutti i fornitori di browser.

Riferimento: Nascondi il testo segnaposto in primo piano con CSS di Ilia Raiskin.

— Toran Billups
fonte
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');
});
— Uffo
fonte
1
Questo presuppone solo un input.
— nym
2

2018> SOLUZIONE JQUERY v.3.3: Funziona a livello globale per tutti gli input, area di testo con segnaposto.

 $(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);
         };
     }); 
});
— Karel Sniper Žák
fonte
1

La demo è qui: jsfiddle

Prova questo :

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

        });

}
— Suresh Pattu
fonte
usa $ ("input [segnaposto]") invece per selezionare solo i campi che hanno un attributo segnaposto.
— Silkster
Questa è la risposta migliore, semplice e deseleziona le altre quando sfocate
— JGallardo
1

per input

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

per textarea

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
— Wagh
fonte
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'));
});
— OsBen
fonte
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");
    });
});
— hadi
fonte
0

Oltre a tutto quanto sopra, ho due idee.

Puoi aggiungere un elemento che imita il detentore del posto, quindi usando javascript controlla l'elemento che mostra e nasconde.

Ma è così complesso, l'altro sta usando il selettore di css del fratello. Proprio così:

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

23333, ho un inglese scarso. Spero di risolvere il tuo problema.

— dufemeng
fonte
Si prega di controllare questo URL , sarà utile per aumentare la qualità dei contenuti;
— Willie Cheng,
0

prova questa funzione:

+ Nasconde il segnaposto in primo piano e lo restituisce in caso di sfocatura

+ Questa funzione dipende dal selettore segnaposto, prima seleziona gli elementi con l'attributo segnaposto, attiva una funzione sulla messa a fuoco e un'altra sulla sfocatura.

in primo piano: aggiunge un attributo "data-text" all'elemento che ottiene il suo valore dall'attributo segnaposto, quindi rimuove il valore dell'attributo segnaposto.

on blur: restituisce il valore del segnaposto e lo rimuove dall'attributo 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', '');
  });
});

puoi seguirmi molto bene se guardi cosa sta succedendo dietro le quinte ispezionando l'elemento di input

— Wael Assaf
fonte
0

La stessa cosa che ho applicato nell'angolo 5.

ho creato una nuova stringa per memorizzare il segnaposto

newPlaceholder:string;

quindi ho usato le funzioni di messa a fuoco e sfocatura sulla casella di input (sto usando il completamento automatico di prime ng).

Il segnaposto sopra viene impostato dal dattiloscritto

Sto usando due funzioni:

/* 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;
}
— Rohit Grover
fonte
0

Non è necessario utilizzare CSS o JQuery. Puoi farlo direttamente dal tag di input HTML.

Ad esempio , nella casella di posta elettronica sottostante, il testo segnaposto scomparirà dopo aver fatto clic all'interno e il testo verrà visualizzato di nuovo se si fa clic all'esterno.

<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">
— Saiful Islam
fonte
-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; }
— maPer77
fonte
Questa risposta è identica a una risposta precedente. Se hai qualcosa da aggiungere o migliorare, suggerisci una modifica alla risposta originale.
— JonathanDavidArndt
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.