Поля ввода текста Javascript, отображающие текст инструкции (заполнитель)

Question

Как лучше всего иметь поле для ввода текста, которое отображает инструкции о том, что вводить в это поле серым цветом.Когда вы фокусируетесь на этом поле ввода, серый текст инструкции исчезает, а ваш вводимый текст кажется черным.Если вы удалите введенный текст и сосредоточитесь на этом вводе, то снова появится серый текст инструкции.

Я пытался реализовать это с помощью jQuery, но у меня возникали разные странные проблемы с разными браузерами.Иногда, когда вы возвращаетесь на экран, текст инструкции становится черным и больше не исчезает, подобные проблемы.

Существует ли для этого стандартная библиотека javascript?Я не могу найти ни одного!

О, и текст инструкции не может быть изображением, поскольку он должен быть доступен на разных языках в зависимости от языковых предпочтений браузера.

Answer 1

Вам не нужен JavaScript для этого.

HTML5:

<input type="text" id="email" name="email" placeholder="Enter your email address">

Это работает в современных браузерах. Если вы добавите modernizr.js на свою страницу, он будет работать во всех браузерах.

Answer 2

Вы можете использовать плагин водяных знаков в jquery.use эту ссылку.

пример

 $(this).Watermark("your instructions");

Answer 3

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');
    };
  });​
});

демо

Answer 4

код заполнителя - имя

имя переменной равно

var name=$("#con-name");
var nameval="Enter your name";



name.val(nameval);
name.focus(function(){  
     if (this.value == nameval ) { 
         this.value = ''; 
     }; 
    }).blur(function(){ 
         if (this.value == '') {    
         this.value = nameval;  
    };  
 });
 //submit to clear code
 $("#sub_con_page").click(function() {  
    if(name.val()==nameval) { 
       name.val(""); 
     } 
 });

DEMO LINK

Answer 5

Посмотрите на это: http://fuelyourcoding.com/scripts/infield/

Answer 6

Сделайте ввод прозрачным и поместите текст позади него.Проверьте значение onload, onblur, чтобы решить, должен ли текст быть видимым или нет.Сделайте его невидимым на фокусе.

Например: http://dorward.me.uk/tmp/label-work/example.html (вам просто нужно стилизовать метку и ввести разные цвета переднего плана)

Answer 7

<input type="text" name="myText" value="Enter Name" style="color:gray" onfocus="this.value=''">