Можно ли изменить значение ввода с помощью CSS?

Question

Можно ли изменить значение поля ввода с помощью CSS, когда пользователь нажимает на него?

Как:

<input type=text name=username> 
<input type=password name=password> 

Таким образом, когда пользователь нажимает на это поле, текст исчезнет, ​​и он будет в состоянии написать что-то.

Я пробовал:

input[value="Input desired username here"] { 
styles... 
} 

Есть улики?

Answer 1

Для этого не нужно использовать css. Вы можете использовать атрибут заполнитель для ввода тега, он будет показывать значения по умолчанию в полях ввода:

<input type="text" name="username" placeholder="Username" /> 

Пожалуйста, обратите внимание, что атрибут placeholder не поддерживается во всех браузерах, и если вы хотите сделать это кросс-браузер, вы можете написать яваскрипт кода поставить значение по умолчанию в вашем входном коробке или использовать эту простые и быстро исправить:

<input type="text" name="username" onFocus="if(this.value=='Username') this.value='';" onBlur="if(this.value=='') this.value='Username';" value="Username" /> 

Answer 2

Это называется заполнителем. Современные браузеры позволят вам использовать атрибут placeholder следующим образом:

<input type="text" name="username" placeholder="Input desired username here" /> 

и он появится как вы хотели бы. Затем вам нужно будет использовать Modernizr для резервного порта, что позволяет работать с более старыми браузерами. Что-то вроде этого JavaScript поможет:

$(document).ready(function() { 
    if(!Modernizr.input.placeholder) { 
    $('[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(''); 
     } 
     }) 
    }); 
    } 
})