Jak automatycznie ukryć tekst zastępczy po aktywowaniu za pomocą css lub jquery?


213

Odbywa się to automatycznie dla każdej przeglądarki oprócz Chrome .

Chyba muszę specjalnie celować w Chrome .

Jakieś rozwiązania?

Jeśli nie z CSS , to z jQuery ?

Z poważaniem.


no cóż, wtedy moja edycja może pomóc
Toni Michel Caubet

Opera to także kolejna przeglądarka, która usuwa zmienne zastępcze.
Lucas

Firefox od wersji 15 nie usuwa już tekstu zastępczego, dopóki nie zaczniesz pisać. Myślę, że to samo może dotyczyć IE10, ale nie mam sposobu, aby to sprawdzić.
Rob Fletcher

1
Obawiam się, że nikt nie wspomniał o tym, że nie powinieneś zawracać sobie głowy modyfikowaniem natywnych zachowań przeglądarki. Dla jednego wolę, aby symbol zastępczy pozostał obecny. Pomaga mi to jako użytkownik końcowy i jest to funkcja, którą przeglądarki zaczynają teraz wdrażać ... prawdopodobnie dlatego, że zachowanie polegające na zniknięciu po skupieniu okazało się problemem użyteczności. Niech przeglądarka będzie.
Ryan Wheale 11.01.2013

„Odbywa się to automatycznie dla każdej przeglądarki oprócz Chrome”. Nigdy więcej? Właśnie próbowałem tego na OSX w Firefox 37.0.2, Safari 7.1.5 i Chrome 42.0. Żaden z nich nie usuwa tekstu zastępczego, dopóki nie zacznę pisać, a wszystkie z nich odkładają go z powrotem, gdy wyczyszczę pole.
Nathan Long

Odpowiedzi:


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

2
To sprawia, że ​​odchodzi, ale kiedy klikam poza polem, pozostaje pusty.
LondonGuy,

2
@LondonGuy: Właśnie edytowałem mój post, zobacz, czy działa tak, jak chcesz. Ale rozwiązanie Toni Michel Caubet jest ładniejsze
MatuDuke

9
Problem w tym, że jest to natrętny JavaScript. Rozwiązanie Toni Michel Caubet jest lepsze.
Silkster,

Podoba mi się, ale niestety nie działa ani w IE, ani w Safari.
Mohammed Moustafa


455

Edycja: wszystkie przeglądarki obsługują teraz

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

Firefox 15 i IE 10+ obsługują to teraz. Aby rozwinąć rozwiązanie CSS 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
Świetna odpowiedź! Nie widzę sensu, by porzucać moje stare rozwiązanie jQuery na rzecz HTML5, a następnie śmiało dodać JavaScript jako poprawkę. Właśnie takiego rozwiązania szukałem.
nienn

@MartinHunt próbowałeś tego na FF? input: focus :: - moz-placeholder
Philip

16
Przepraszamy za pogłębienie starego wątku, ale tylko po to, by uczynić go bardziej kompletnym: input: focus: -moz-placeholder jest dla Firefoksa 18 i niższych, dla 19 lat musisz użyć: input: focus :: - moz-placeholder (uwaga dwukropek). Ref: css-tricks.com/snippets/css/style-placeholder-text
Peter Lewis

ten komentarz jest wygrany. współpracuje z dynamicznymi kontrolkami, takimi jak kendo
reflog

1
Świetna odpowiedź także ode mnie! Dla tych z nas, którzy mogą również wymagać tej funkcji, gdy pole jest wyłączone, znajduje się tutaj kod CSS: / * Ukrywanie tekstu zastępczego (jeśli istnieje), gdy pole trzymania jest wyłączone * / input: disabled :: - webkit-input- symbol zastępczy {kolor: przezroczysty; } input: disabled: -moz-placeholder {color: transparent; } input: disabled :: - moz-placeholder {color: transparent; } input: disabled: -ms-input-placeholder {color: transparent; }
Ramanagom,

74

Oto rozwiązanie tylko dla CSS (na razie działa tylko w WebKit):

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

1
Podoba mi się ta odpowiedź, ale obsługa przeglądarki po prostu jej jeszcze nie ma.
Jerry

44

Rozwiązanie Pure CSS (nie wymaga JS)

Opierając się na odpowiedziach @Hexodus i @Casey Chu, oto zaktualizowane rozwiązanie dla wielu przeglądarek, które wykorzystuje nieprzezroczystość CSS i przejścia, aby usunąć tekst zastępczy. Działa dla każdego elementu, który może używać symboli zastępczych, w tym textareai inputtagów.

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

Edycja: Zaktualizowano w celu obsługi nowoczesnych przeglądarek.


6
Najlepsze rozwiązanie CSS!
Fatih SARI

Dobry stary CSS ... świetne proste rozwiązanie! Dlaczego o tym nie pomyślałem?
JI-Web,

40

próbowałeś placeholder attr?

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

-EDYTOWAĆ-

Rozumiem, spróbuj tego następnie:

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

-EDYTOWAĆ-

W rzeczywistości, ponieważ do opisu wartości należy użyć symbolu zastępczego, a nie nazwy danych wejściowych. Sugeruję następującą alternatywę

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/


Miło widzieć używany atrybut danych. Ale spojrzałbym na odpowiednik CSS. Po zapisaniu w pamięci podręcznej będzie to szybsze rozwiązanie i może mieć zasięg globalny. Powyższe wymaga umieszczenia atrybutu danych na każdym potrzebnym elemencie. (odpowiedź poniżej)
Neil

1
To jest skomplikowane. Można to zrobić przy znacznie mniejszym kodzie.
JGallardo

@JGallardo pokaż mi światło (ale nie jestem pewien, czy widziałeś 3 różne rozwiązania)
Toni Michel Caubet

19

Aby rozszerzyć odpowiedź @ casey-chu i pirackiego robota, oto sposób kompatybilny z wieloma przeglądarkami:

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

Dokładnie to, co teraz napisałem (zamiast tego użyłem opacity:0;)! Jedyne rozwiązanie CSS w tym wątku ze wszystkimi możliwymi przeglądarkami!
ReynekeVosz,

11

Odpowiedź Toni jest dobra, ale wolę porzucić IDi jawnie użyć input, w ten sposób wszystkie dane wejściowe z placeholderzachowaniem:

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

Zauważ, że $(function(){ });jest to skrót dla $(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'));
    });
})

Próbny.


3
To nie działa, jeśli masz więcej niż jedno pole. Oto ulepszona wersja twojego kodu jsfiddle.net/6CzRq/64
svlada

10

Lubię spakować to w przestrzeni nazw i uruchomić na elementach z atrybutem „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

Czasami potrzebujesz SPECYFIKACJI, aby mieć pewność, że twoje style zostaną zastosowane w najsilniejszy sposób. idDziękujemy za @Rob Fletcher za wspaniałą odpowiedź, w naszej firmie zastosowaliśmy

Zastanów się więc nad dodaniem stylów poprzedzonych identyfikatorem kontenera aplikacji

    #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

Z Pure CSS zadziałało dla mnie. Uczyń go przezroczystym, gdy wprowadzono / Focues na wejściu

 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

Aby dodatkowo udoskonalić próbkę kodu Wallace'a 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'));
      });
})

Zapewnia to, że każde wejście zapisuje poprawny tekst zastępczy w atrybucie danych.

Zobacz działający przykład tutaj w jsFiddle .


4

Podoba mi się podejście css doprawione przejściami. Na Focus symbol zastępczy zanika;) Działa również w obszarach tekstowych.

Dzięki @Casey Chu za świetny pomysł.

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

Korzystając z SCSS wraz z http://bourbon.io/ , to rozwiązanie jest proste, eleganckie i działa we wszystkich przeglądarkach internetowych:

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

Użyj Bourbon! To dobrze dla ciebie !



3

W przypadku rozwiązania opartego wyłącznie na CSS:

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

Uwaga: nie jest jeszcze obsługiwany przez wszystkich dostawców przeglądarek.

Odniesienie: Ukryj tekst zastępczy w centrum uwagi za pomocą CSS Ilia Raiskin.


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
Zakłada to tylko jedno wejście.
nym

2

2018> JQUERY v.3.3 ROZWIĄZANIE: Działa globalnie dla wszystkich danych wejściowych, obszaru tekstowego z symbolem zastępczym.

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

Demo jest tutaj: jsfiddle

Spróbuj tego :

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

        });

}

zamiast tego użyj $ („input [symbol zastępczy]”), aby wybrać tylko pola, które mają atrybut symbolu zastępczego.
Silkster,

To najlepsza odpowiedź, prosta i odznacza pozostałe, gdy jest nieostra
JGallardo

1

na wejście

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

dla 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

Oprócz wszystkich powyższych mam dwa pomysły.

Możesz dodać element imitujący symbol zastępczy. Następnie za pomocą javascript steruj wyświetlaniem i ukrywaniem elementu.

Ale jest tak skomplikowane, że drugi używa selektora brata cs. Tak po prostu:

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

23333, Mam słabą znajomość języka angielskiego. Mam nadzieję, że rozwiążę Twój problem.


Sprawdź ten adres URL , przydatne będzie podniesienie jakości treści;
Willie Cheng

0

spróbuj tej funkcji:

+ Ukrywa PlaceHolder po ustawieniu ostrości i zwraca go ponownie po rozmyciu

+ Ta funkcja zależy od selektora symboli zastępczych, najpierw wybiera elementy z atrybutem symbolu zastępczego, uruchamia funkcję skupiania, a drugą funkcję rozmycia.

w centrum uwagi: dodaje atrybut „data-text” do elementu, który pobiera swoją wartość z atrybutu zastępczego, a następnie usuwa wartość atrybutu zastępczego.

przy rozmyciu: zwraca wartość zastępczą i usuwa ją z atrybutu 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', '');
  });
});

możesz śledzić mnie bardzo dobrze, jeśli spojrzysz na to, co dzieje się za kulisami, sprawdzając element wejściowy


0

To samo zastosowałem w kątowniku 5.

utworzyłem nowy ciąg do przechowywania symboli zastępczych

newPlaceholder:string;

następnie użyłem funkcji skupienia i rozmycia w polu wprowadzania (korzystam z autouzupełniania Prime).

Powyższy symbol zastępczy jest ustawiany z maszynopisu

Korzystam z dwóch funkcji -

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

Nie musisz używać żadnego CSS ani JQuery. Możesz to zrobić bezpośrednio ze znacznika wejściowego HTML.

Na przykład w polu poniżej wiadomości e-mail tekst zastępczy zniknie po kliknięciu wewnątrz, a tekst pojawi się ponownie po kliknięciu na zewnątrz.

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

Ta odpowiedź jest identyczna z poprzednią odpowiedzią. Jeśli masz coś do dodania lub ulepszenia, zasugeruj edycję oryginalnej odpowiedzi.
JonathanDavidArndt
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.