是否可以使用CSS更改输入值?

时间:2013-03-04 22:26:20

标签: css forms input

用户点击它时,我可以使用CSS更改输入字段值吗?

像:

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

因此,当用户点击此字段时,文本将消失,他将能够写一些东西。

我试过了:

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

任何线索?

2 个答案:

答案 0 :(得分:4)

没有必要为此使用css。您可以对输入标记使用占位符属性,它将在输入框中显示默认值:

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

请注意,所有浏览器都不支持placeholder属性,如果您希望跨浏览器进行浏览,可以编写一个javascript代码,在输入框中输入默认值或使用此简单快捷固定:

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

答案 1 :(得分:2)

这称为占位符。现代浏览器允许您使用这样的占位符属性:

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