Поля ввода текста Javascript, которые отображают инструкцию (заполнитель ) text
Как лучше всего иметь поле ввода текста, которое отображает инструкции о том, что вводить в это поле серым цветом. Когда вы фокусируетесь на этом поле ввода, серый текст инструкции исчезает, а ваш вводимый текст кажется черным. Если вы удалите введенный текст и сфокусируйтесь на удалении от этого ввода, появится серый текст инструкции.
Я пытался реализовать это с помощью jQuery, но у меня возникали разные странные проблемы с разными браузерами. Иногда, когда вы возвращаетесь на экран, текст инструкции становится черным и больше не исчезает, что-то в этом роде.
Для этого есть стандартная библиотека javascript? Я не могу найти ни одного!
О, и текст инструкции не может быть изображением, потому что он должен быть доступен на разных языках в зависимости от языковых предпочтений браузера.
4 ответа
Вы можете использовать плагин водяных знаков в jquery.use по этой ссылке.
example
$(this).Watermark("your instructions");
html
<input type="text" id="user" class="textbox default" value="Enter login name">
<input type="password" id="pass" class="textbox">
jQuery
$(function(){
$('.textbox').focus(function(){
if (this.value == this.defaultValue) {
this.value = '';
$(this).removeClass('default');
};
}).blur(function(){
if (this.value == '') {
this.value = this.defaultValue;
$(this).addClass('default');
};
});
});
demo
<input type="text" name="myText" value="Enter Name" style="color:gray" onfocus="this.value=''">
Сделайте ввод прозрачным и поместите текст позади него. Проверьте значение onload, onblur, чтобы решить, должен ли текст быть видимым или нет. Сделайте его невидимым в фокусе.
Например: http://dorward.me.uk/tmp/label-work/example.html (вам просто нужно стилизовать метку и ввод с разными цветами переднего плана)