Это делается автоматически для каждого браузера, кроме Chrome .
Я предполагаю, что должен специально предназначаться для Chrome .
Какие-либо решения?
Если не с CSS , то с jQuery ?
С уважением.
Это делается автоматически для каждого браузера, кроме Chrome .
Я предполагаю, что должен специально предназначаться для Chrome .
Какие-либо решения?
Если не с CSS , то с jQuery ?
С уважением.
Ответы:
<input
type="text"
placeholder="enter your text"
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />
Изменить: все браузеры поддерживают сейчас
input:focus::placeholder {
color: transparent;
}
<input type="text" placeholder="Type something here!">
Firefox 15 и IE 10+ также поддерживают это сейчас. Чтобы расширить 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+ */
Основываясь на ответах @Hexodus и @Casey Chu, вот обновленное и кросс-браузерное решение, которое использует непрозрачность CSS и переходы для затухания текста-заполнителя. Он работает для любого элемента, который может использовать заполнители, в том числе textarea
и 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 */
Изменить: Обновлено для поддержки современных браузеров.
Вы пробовали заполнить attr?
<input id ="myID" type="text" placeholder="enter your text " />
-РЕДАКТИРОВАТЬ-
Я вижу, попробуйте это тогда:
$(function () {
$('#myId').data('holder', $('#myId').attr('placeholder'));
$('#myId').focusin(function () {
$(this).attr('placeholder', '');
});
$('#myId').focusout(function () {
$(this).attr('placeholder', $(this).data('holder'));
});
});
Тест: http://jsfiddle.net/mPLFf/4/
-РЕДАКТИРОВАТЬ-
На самом деле, поскольку заполнитель должен использоваться для описания значения, а не имени ввода. Я предлагаю следующую альтернативу
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;
}
Тест:
Чтобы усилить ответ @ casey-chu и пиратского робота, вот более совместимый с браузером способ:
/* 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; }
opacity:0;
)! Единственное CSS-решение в этой теме со всеми возможными браузерами!
Ответ Тони хорош, но я бы предпочел отбросить ID
и явно использовать input
таким образом все входные данные для placeholder
получения поведения:
<input type="text" placeholder="your text" />
Обратите внимание, что $(function(){ });
это сокращение для $(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'));
});
})
Мне нравится упаковывать это в пространство имен и запускать элементы с атрибутом "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'));
});
});
};
Иногда вам нужна СПЕЦИФИЧНОСТЬ, чтобы убедиться, что ваши стили применяются с наибольшей id
силой. Спасибо за @Rob Fletcher за отличный ответ, в нашей компании мы использовали
Поэтому, пожалуйста, рассмотрите возможность добавления стилей с префиксом id контейнера приложения.
#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;
}
С Pure CSS это работает для меня. Сделайте его прозрачным при вводе / фокусировке на входе
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;
}
Для дальнейшего уточнения примера кода Уоллеса Сидре :
$(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'));
});
})
Это гарантирует, что каждый вход сохраняет правильный заполнитель текста в атрибуте данных.
Смотрите рабочий пример здесь в jsFiddle .
Мне нравится подход css, приправленный переходами. На Focus заполнитель исчезает;) Работает также для текстовых полей.
Спасибо @Casey Chu за отличную идею.
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;
}
Используя SCSS вместе с http://bourbon.io/ , это простое, элегантное решение работает во всех веб-браузерах:
input:focus {
@include placeholder() {
color: transparent;
}
}
Используйте Бурбон! Это хорошо для тебя !
Этот кусок CSS работал для меня:
input:focus::-webkit-input-placeholder {
color:transparent;
}
Для чистого решения на основе CSS:
input:focus::-webkit-input-placeholder {color:transparent;}
input:focus::-moz-placeholder {color:transparent;}
input:-moz-placeholder {color:transparent;}
Примечание. Пока не поддерживается всеми поставщиками браузеров.
Ссылка: Скрыть текст местозаполнения в фокусе с помощью CSS от Ильи Райскина.
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');
});
2018> JQUERY v.3.3 РЕШЕНИЕ: Глобальная работа для всех входных данных, текстовая область с заполнителем.
$(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);
};
});
});
Демо здесь: jsfiddle
Попробуй это :
//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'));
});
});
}
Помимо всего вышесказанного, у меня есть две идеи.
Вы можете добавить элемент, имитирующий держатель поля. Затем с помощью javascript управляйте отображением и скрытием элемента.
Но это так сложно, другой использует братский селектор css. Просто так:
.placeholder { position: absolute; font-size: 14px; left: 40px; top: 11px; line-height: 1; pointer-events: none; }
.send-message input:focus + .placeholder { display: none; }
23333, у меня плохой английский. Надеюсь решить вашу проблему.
попробуйте эту функцию:
+ Он скрывает PlaceHolder в фокусе и возвращает его обратно на Blur
+ Эта функция зависит от селектора-заполнителя, сначала она выбирает элементы с атрибутом-заполнителем, запускает функцию фокусировки, а другую - размытие.
в фокусе: он добавляет атрибут «data-text» к элементу, который получает свое значение из атрибута placeholder, затем удаляет значение атрибута placeholder.
на размытие: возвращает значение заполнителя и удаляет его из атрибута 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', '');
});
});
Вы можете очень хорошо следовать за мной, если вы посмотрите, что происходит за кадром, осмотрев элемент ввода
То же самое я применил в угловых 5.
я создал новую строку для хранения заполнителя
newPlaceholder:string;
Затем я использовал фокус и размытие в поле ввода (я использую простое автозаполнение).
Выше заполнитель устанавливается из машинописи
Две функции, которые я использую -
/* 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;
}
Нет необходимости использовать любой CSS или JQuery. Вы можете сделать это прямо из тега ввода HTML.
Например , в приведенном ниже почтовом ящике текст заполнителя исчезнет после щелчка внутри, а текст появится снова, если щелкнуть снаружи.
<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">
/* 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; }