javascript - フォーカス時にプレースホルダーを削除する方法

Question

サポートしていないブラウザーにプレースホルダーを追加するために、この単純な関数を作成しました。

デモ

問題は、ユーザーがその中をクリックしたときにプレースホルダーを削除する可能性をその関数に追加するにはどうすればよいですか?

Answer 1

これを実現するために JavaScript 関数を使用する必要はありません。より簡単な解決策は次のとおりです。

<input type="text" placeholder="enter your text" onfocus="this.placeholder=''" onblur="this.placeholder='enter your text'" />

Answer 2

$("input[placeholder]").each(function () {
    $(this).attr("data-placeholder", this.placeholder);

    $(this).bind("focus", function () {
        this.placeholder = '';
    });
    $(this).bind("blur", function () {
        this.placeholder = $(this).attr("data-placeholder");
    });
});

Answer 3

これに対する非常にシンプルで包括的なソリューションは、Mozilla、IE、Chrome、Opera、および Safari で機能するものです。

<input type="text" placeholder="your placeholder" onfocus="this.placeholder=''" onblur="this.placeholder='your placeholder'" />

Answer 4

$('input').focus(function()
{
  $(this).attr('placeholder','');

});

Answer 5

プレースホルダーをサポートしていないブラウザーの場合は、 https ://github.com/mathiasbynens/jquery-placeholder を使用でき ます。通常、HTML5 の場合と同様に placeholder 属性を追加してから、このプラグインを呼び出します: $('[placeholder]').placeholder();. 次に、Rohan Kumar のコードを使用すると、クロスブラウザーになります。