0

http://jsfiddle.net/7995m/で私のフィドルを確認してください。フィドルでは、テキスト ボックスがクリックされるとすぐに既定のテキストが消えます。テキストが書き込まれるまで、デフォルトのテキストを変更しないでください。以下は私のコードです:-

$(".defaultText").focus(function(srcc)
{
    if ($(this).val() == $(this)[0].title)
    {
        $(this).removeClass("defaultTextActive");
        $(this).val("");
    }
});

$(".defaultText").blur(function()
{
    if ($(this).val() == "")
    {
        $(this).addClass("defaultTextActive");
        $(this).val($(this)[0].title);
    }
});

$(".defaultText").blur();
4

5 に答える 5

3

これにより、HTML5 プレースホルダー属性http://davidwalsh.name/html5-placeholderの使用を開始できます。

Web アプリケーションでよく使用されます。

対象のブラウザーがプレースホルダーをサポートしていない場合は、modernizr を使用してポリフィルを作成し、html5 属性をサポートできます。これはjqueryを使用したポリフィルですhttps://github.com/mathiasbynens/jquery-placeholder

プレースホルダーまたはその他の html5 属性の追加のポリフィルは、 https ://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills で見つけることができます。

これは、modernizr http://modernizr.com/へのリンクです。

ポリフィルを作成した後、modernizr は、ページをレンダリングするブラウザーがプレースホルダー属性をサポートしているかどうかを検出し、サポートしていない場合、ポリフィルは動作をエミュレートします。このように、HTML コードはカスタム ソリューションで汚染されず、プレースホルダーをサポートする将来のブラウザーは影響を受けません。

これは本当に最善の方法です。カスタム ソリューションを作成することは短期的には優れていますが、このようなポリフィルを使用すると、1 年後に新しいブラウザーがカスタム ソリューションと互換性を失うなど、長期的に潜在的な問題を回避するのに役立ちます。ポリフィルを使用して HTML5 属性の機能を埋めることで、古いブラウザーで同じ機能を使用できるようにしながら、アプリケーションが将来壊れることがないようにします。また、html コードの可読性にも役立ちます。

于 2013-08-03T06:37:27.650 に答える
2

placeholder属性を使用して、コードの行数を減らします 。

元

<input type="text" name="first_name" placeholder="Your first name...">

デモフィドル

于 2013-08-03T06:36:00.347 に答える
2

ワーキングフィドル

Placeholder は良い解決策ですが、 IE7、8、9ではサポートfocusさkeydownれていません。そのため、いくつかの js を使用する代わりに (いくつかのポリフィルが利用可能です)、このコード自体を続行することをお勧めします。

$(".defaultText").keydown(function(srcc)
{
    if ($(this).val() == $(this)[0].title)
    {
        $(this).removeClass("defaultTextActive");
        $(this).val("");
    }
});

$(".defaultText").blur(function()
{
    if ($(this).val() == "")
    {
        $(this).addClass("defaultTextActive");
        $(this).val($(this)[0].title);
    }
});

$(".defaultText").blur();
于 2013-08-03T06:36:55.080 に答える
0

属性を使用できplaceholderます。

于 2013-08-03T06:36:56.873 に答える
0

本当にこれを実現したい場合は、標準的な動作ではありませんが、フォーカス イベントの代わりにこれを使用します。

$(".defaultText").keydown(function(srcc)
{

        $(this).removeClass("defaultTextActive");
        $(this).val("");

});

ただし、間違いなくプレースホルダー タグを使用してください。これが正しい方法です。

于 2013-08-03T06:37:08.900 に答える