2012-08-04 39 views
8

Utworzono dane wejściowe zgodnie z poniższym kodem.Symbol zastępczy nie znika po ustawieniu ostrości w Chrome

<div> 
    <form id="me" runat="server"> 
    <input id="stuff" type="text" placeholder="Type here" runat="server" /> 
    </form> 
</div> 

Zgodnie z oczekiwaniami, po rozpoczęciu pisania tekst zastępczy zniknie. Działa to tak, jak powinno, w przeglądarce Burning Cat, ale nie w przeglądarce Shiny Metal. Co to powoduje (style, tag serwera, inne rzeczy ...)? Co można z tym zrobić?

Odpowiedz

10

Firefox i chrome (oraz safari) działają inaczej na elementach zastępczych HTML5. Jeśli chcesz chrom znikną symbole zastępcze na ostrości, można użyć następującego skryptu:

$('input:text, textarea').each(function(){ 
    var $this = $(this); 
    $this.data('placeholder', $this.attr('placeholder')) 
     .focus(function(){$this.removeAttr('placeholder');}) 
     .blur(function(){$this.attr('placeholder', $this.data('placeholder'));}); 
}); 
+5

Chciałbym uznać to zachowanie jako błąd. Chodzi mi o to, że jeśli muszę dodać trochę JS, aby zniknął symbol zastępczy, to trzeba go nazwać obejściem. Czy istnieje ważny powód, dla którego zachowuje się w ten sposób? –

+6

Naprawdę podoba mi się sposób, w jaki robią to place. Pozwala na użycie tekstu zastępczego jako etykiety pola formularza NAWET jeśli twoja strona jest skupiona na jednym z pól. – xamde

+3

Selektor powinien być '$ ('[placeholder]')', ponieważ istnieje wiele typów danych wejściowych, które nie są tekstem ani textarea (e-mail itp.) I mogą zawierać symbol zastępczy. Również nowy jQuery nie lubi (niestety) selektora ': text'. – Rudy

0

Można użyć tej zastępczy jquery plugin: placeholderFix. Dzięki tej wtyczce znacznik zastępczy działa w taki sam sposób we wszystkich przeglądarkach, także w przeglądarkach, które go nie obsługują.

28

natknąłem się na ten sam problem dzisiaj i wpadłem z czystego CSS rozwiązanie Hack:

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

+1 za kreatywność, ale muszę zaznaczyć, że - podczas gdy ja ** naprawdę podoba ** podejście - to nie jest rozwiązanie. To jest obejście. Nadal twierdzę, że to błąd w chrome. :) –

+0

Brakowało ci również składni znacznika językowego. Powinno to być * lang-css * wewnątrz i dwa kreski "* - *" na końcu. Poprawiłem sytax, a teraz twoja odpowiedź wygląda jeszcze lepiej! –

+0

Całkowicie się zgadzam. Rozważałem użycie słowa * hack * zamiast * solution *, ale z jakiegoś powodu poszedłem z tym drugim. Zmienilem teraz post, aby to odzwierciedli. Próbowałem różnych wariantów znacznika składni, ale nic nie zadziałało. Teraz myślę, że to zadziałało, ale nie zauważyłem, ponieważ kolory są bardzo ciemne. Dzięki za pomoc. –

Powiązane problemy