Кроссбраузерный PlaceHolder
PlaceHolder - это удобно
Использование атрибута placeholder в html формах поможет Вам сэкономить место на странице, отразив подсказки к форме прямо в её полях. Но не всё так хорошо, ведь placeholder появился относительно недавно и поэтому не поддерживается старыми браузерами, а это значит, что нам нужно использовать решение кроссбраузерное. И мы это сделаем, а ещё стилизуем текст плейсхолдера под свой дизайн.
Кроссбраузерный Placeholder на JS
Код ниже - будет искать атрибут placeholder в ваших формах, брать из него текст и вставлять его в value ваших input (textarea). Это довольно старый подход, но в данном случае для хранения текста-подсказки используется placeholder и скрипт полноценно действует на все формы на странице - сразу. Дополнительно, к input с отображающимся placeholder добавляется класс .placeholder, благодаря которому Вы можете стилизовать текст плейсхолдера. При фокусе, текст placeholder`а будет исчезать как и класс placeholder.
$(function() {
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
});
В таком методе есть один минус, т.к. мы создаём кроссбраузерный плейсхолдер путём добавления текста в value, то может возникнуть трудность при отправке и проверке формы на наличие вписанного текста. Тогда, определить введённый пользователем это текст или текст из placeholder - нам поможет класс placeholder, если он присутствует у input, значит пользователь не вводил в это поле какие-либо данные.
Стилизация PlaceHolder
А теперь кусок css, который поможет стилизовать настоящий и наш искусственный placeholder под единый стиль и под Ваш дизайн.
/* вид искуственного placeholder`а */
.placeholder {color:#777 !important;}
/* вид настоящего placeholder`а */
::-webkit-input-placeholder{color:#777;}
::-moz-placeholder{color:#777;}/* Firefox 19+ */
:-moz-placeholder{color:#777;}/* Firefox 18- */
:-ms-input-placeholder{color:#777;}
/* если текс placeholder длинее, чем поле в котором он находится */
input[placeholder]{text-overflow:ellipsis;}
input::-moz-placeholder{text-overflow:ellipsis;}
input:-moz-placeholder{text-overflow:ellipsis;}
input:-ms-input-placeholder {text-overflow:ellipsis;}
/* поведение при фокусе - задаём также, как в искуственном, убираем текст */
:focus::-webkit-input-placeholder{color:transparent}
:focus::-moz-placeholder{color:transparent}
:focus:-moz-placeholder{color:transparent}
:focus:-ms-input-placeholder{color:transparent}
Удачных экспериментов!
Комментарии и отзывы к материалу
Открыта вакансия на первого комментатора!Отправить комментарий
Как зовут?
Сообщение