0

私は次のようなフォームフィールドを作成しました：

<p>
<label for="your-name" style="display: block; ">Your name</label>
<span>
<input type="text" name="your-name" value="" class="" size="40">
</span>
</p>

このコードは変更できません。私は絶対にラベルをフィールドの上に配置し、jQueryを適用して、次のようにフィールドにカーソルを合わせたときにこれを非表示にしました。

jQuery('form p').hover(
   function() {
        jQuery(this).find("label").hide();
   },
   function() {
        jQuery(this).find("label").show();    
    }
);

ただし、これは、マウスがフィールドにカーソルを合わせているときにのみ機能します。フィールドに入力してホバーしたときにラベルを非表示にする方法はありますか？

ありがとうロバート

4

2 に答える 2

1

それはそれを行うかなり厄介な方法です..これは私がそれを行う方法です:

HTML:

<input type="text" name="your-name" id="your_name" value="Your Name" class="" size="40">

jQuery:

$('#your_name').focus(function(){
  if ($(this).val() == 'Your Name'){
      $(this).val('');
  }
}).blur(function(){
  if ($(this).val() == ''){
      $(this).val('Your Name');
  }
});

またはジェームズが言及したようなプレースホルダーを使用する

于 2012-09-25T22:41:59.220 に答える
0

既存のメソッドを使用する場合は、次のようにすることができます。

デモ: http://jsfiddle.net/SLjMn/

于 2012-09-25T22:42:37.793 に答える