Jak automatycznie ukryć tekst zastępczy podczas ustawiania ostrości za pomocą css lub jquery?
Odbywa się to automatycznie dla każdej przeglądarki z wyjątkiem Chrome .
Zgaduję, że muszę konkretnie celować w Chrome .
Jakieś rozwiązania?
Jeśli nie z CSS, to z jQuery?
Z poważaniem.
26 answers
<input
type="text"
placeholder="enter your text"
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-17 08:10:59
Edytuj: Wszystkie przeglądarki obsługują teraz
input:focus::placeholder {
color: transparent;
}
<input type="text" placeholder="Type something here!">
Firefox 15 i IE 10+ również to teraz obsługuje. Aby rozwinąć rozwiązanie CSS :
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+ */
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-12-12 23:59:48
Oto rozwiązanie tylko dla CSS (na razie działa tylko w WebKit):
input:focus::-webkit-input-placeholder {
opacity: 0;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-03 17:13:08
Pure CSS Solution (no js required)
Bazując na odpowiedziach @ Hexodus i @ Casey Chu, oto zaktualizowane rozwiązanie między przeglądarkami, które wykorzystuje krycie CSS i przejścia, aby usunąć tekst zastępczy. Działa dla każdego elementu, który może używać elementów zastępczych, w tym znaczników textarea
i 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 */
<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>
Korekta
- Edycja 1 (2017): Aktualizacja do obsługi nowoczesnych przeglądarek.
- Edit 2( 2020): Dodano runnable Stack Snippet.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-07-30 23:28:57
Próbowałeś zastępczego attr?
<input id ="myID" type="text" placeholder="enter your text " />
-EDIT -
Widzę, spróbuj tego:
$(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/
-EDIT -
Właściwie, ponieważ symbol zastępczy powinien być używany do opisania wartości, a nie nazwy wejścia. Proponuję 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:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-07 10:49:16
Aby poszerzyć odpowiedź @ casey-Chu i pirate Roba, oto bardziej kompatybilny z przeglądarką:
/* 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; }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-01 10:23:29
Odpowiedź Toni jest dobra, ale wolałbym zrezygnować z ID
i jawnie użyć input
, w ten sposób wszystkie wejścia z placeholder
otrzymają zachowanie:
<input type="text" placeholder="your text" />
Zauważ, że $(function(){ });
jest skrótem $(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'));
});
})
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-07 12:12:35
Lubię spakować to w Przestrzeń 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'));
});
});
};
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-18 08:44:50
Czasami potrzebujesz specyficzności , Aby upewnić się, że Twoje style są stosowane z najsilniejszym czynnikiem id
Dzięki za @Roba Fletchera za świetną odpowiedź, w naszej firmie użyliśmy
Dlatego proszę rozważyć dodanie 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-12 09:44:34
Z czystym CSS to działało dla mnie. Upewnij się, że jest przezroczysty po wpisaniu / skupieniu w 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-12-02 21:47:54
Aby jeszcze bardziej Dopracowaćprzykładowy kod 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'));
});
})
Zapewnia to, że każde wejście przechowuje prawidłowy tekst zastępczy w atrybucie data.
Zobacz działający przykład tutaj w jsFiddle .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:54:59
Lubię podejście css przyprawione przejściami. Na Focusie znika Element Zastępczy;) działa również na tekstach.
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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-28 18:51:40
Używanie SCSS wraz z http://bourbon.io/, To rozwiązanie jest proste, eleganckie i działa na wszystkich przeglądarkach internetowych:
input:focus {
@include placeholder() {
color: transparent;
}
}
Użyj Bourbona ! To dobrze dla Ciebie !Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-15 15:44:04
Ten kawałek CSS zadziałał dla mnie:
input:focus::-webkit-input-placeholder {
color:transparent;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-27 00:14:30
Dla czystego rozwiązania opartego na CSS:
input:focus::-webkit-input-placeholder {color:transparent;}
input:focus::-moz-placeholder {color:transparent;}
input:-moz-placeholder {color:transparent;}
Uwaga: Nie są jeszcze obsługiwane przez wszystkich dostawców przeglądarek.
Reference: Hide placeholder text on focus with CSS by Ilia Raiskin.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-07 12:14:17
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');
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-07 12:32:44
2018 > JQUERY V. 3. 3 Rozwiązanie: Praca globaly dla wszystkich danych wejściowych, textarea 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);
};
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-31 08:59:43
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'));
});
});
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-29 06:34:36
Dla wejścia
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; }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-20 05:09:00
$("input[placeholder]").focusin(function () {
$(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
$(this).attr('placeholder', $(this).data('place-holder-text'));
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-15 22:17:01
$("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");
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-28 09:53:09
Poza tym mam dwa pomysły.
Możesz dodać element imitujący palceholder.Następnie za pomocą javascript kontroluj wyświetlanie i ukrywanie elementu.
Ale to jest tak skomplikowane, że drugi używa selektora CSS brata.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; }
/ Align = "left" / 23333Mam nadzieję, że rozwiążesz swój problem.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-27 03:30:27
Spróbuj tej funkcji:
+Ukrywa Symbol Zastępczy Przy Focusie I Zwraca Go Z Powrotem Przy Rozmyciu
+ Ta funkcja zależy od selektora zastępczego, najpierw wybiera elementy z atrybutem zastępczym, uruchamia funkcję przy ustawianiu ostrości, a drugą przy rozmyciu.
On focus: dodaje atrybut "data-text" do elementu, który pobiera swoją wartość z atrybutu zastępczego, a następnie usuwa wartość atrybutu zastępczego.
On blur: zwraca 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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-23 16:50:19
To samo, co zastosowałem w angular 5.
I created a new string for storage placeholder
newPlaceholder:string;
Następnie użyłem funkcji fokus i blur w polu wejściowym (używam prime ng autocomplete).
Powyższy Element Zastępczy jest ustawiany z maszynopisu
Dwie funkcje, których używam -
/* 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-12 07:43:01
Nie trzeba używać żadnego CSS lub JQuery. Możesz to zrobić bezpośrednio z znacznika wejściowego HTML.
Na przykład , W poniższym polu e-mail, tekst zastępczy zniknie po kliknięciu wewnątrz, a tekst pojawi się ponownie, jeśli klikniesz na zewnątrz.
<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-01-18 05:50:03
/* 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; }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-03 02:21:23