0

ユーザーがクリックしたときにCSSを使用して入力フィールドの値を変更できますか？

好き：

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

したがって、ユーザーがこのフィールドをクリックすると、テキストが消えて、何かを書くことができるようになります。

私が試してみました：

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

手がかりはありますか？

4

2 に答える 2

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" />
于 2013-03-04T22:30:06.863 に答える
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('');
        }
      })
    });
  }
})
于 2013-03-04T22:38:46.593 に答える