0

検索フィールドのデフォルト値を設定しようとしています。アイデアは、ユーザーがクリックするまで検索フィールドの値が「検索」であり、その後は空である必要があるということです。また、「空白」（値として「検索」を使用）である限り、クラスは「.blank」である必要があります。

私はこれを試しました

<input autocomplete="off" class="" id="searchq" name="searchq" onblur="if (this.value == '') { this.value='Search'; jQuery(this).addClass('blank'); };" onfocus="if (this.value == 'Search') { this.value=''; jQuery(this).removeClass('blank'); };" type="text" value="" />

これまでは機能しますが、サイトをロードすると、フィールドは空になります。エフェクトを機能させるには、最初にフィールド内をクリックしてから、ページのどこかをクリックする必要があります。

onBlurと関係があると思います。何か案は？

ありがとう！

4

7 に答える 7

4

これは透かしとして知られています。例については、http://digitalbush.com/projects/watermark-input-plugin/を参照してください。

于 2009-06-23T18:29:29.957 に答える
3

もう 1 つのアイデアは、入力タイプにプレースホルダーを配置することです (これは HTML5 であることに注意してください)。

<input type=text placeholder="Default text here"/>

このようにして、テキストフィールドは灰色のテキスト色で表示されます: ここにデフォルトのテキスト。クリックすると、テキストが削除され、現在のテキストに置き換えられ、空になると元に戻ります。

于 2012-10-31T15:16:10.100 に答える
2

次のように、ハードコードされたデフォルト値「検索」を指定するだけです

<input ... type="text" value="Search" />
于 2009-06-23T18:29:42.390 に答える
2

Search次のように、入力タグで直接初期値を に設定する必要があるように思えます。

<input autocomplete="off" class="blank" id="searchq" name="searchq" onblur="if (this.value == '') { this.value='Search'; jQuery(this).addClass('blank'); };" onfocus="if (this.value == 'Search') { this.value=''; jQuery(this).removeClass('blank'); };" type="text" value="Search" />

初期クラスも同様に設定していることに注意してくださいblank。

于 2009-06-23T18:30:07.617 に答える
1

私は問題を見つけました。私の間違いです。ユーザーが別の場所をクリックすると、onBlurが呼び出されます。onLoadは、タグBODYおよびFRAMESETに対してのみ許可されます。解決策は、サーバー側のどこかにデフォルト値を設定することです（私にとっては、検索語が送信されない場合は、application_controllerで）。

とにかくありがとう！

于 2009-06-23T18:28:05.497 に答える
0

ぼかしとは、フィールドがフォーカスを失うと、最初にフォーカスがなくなるまでフォーカスを失うことができないため、フィールドをクリックしてからクリックして、フィールドが機能することを確認する必要があります。クラスをデフォルトで.blankに設定してみましたか？

<input autocomplete="off" class="blank" ....
于 2009-06-23T18:28:45.107 に答える
0

これを行うために使用するスニペットを次に示します。もっと簡単な方法があるかもしれませんが、これは機能します。クラス .cleardefault を持つアイテムは、最初のマウスオーバーで値がクリアされます。クラス .setcleardefault を持つアイテムはデフォルトをクリアし、ユーザーがボックスに何も入れていない場合は、マウス アウト時にデフォルト値にリセットします。

function ClearDefault(item) {
    // clear the default value of a form element
    if (item.defaultValue == undefined)
        item.defaultValue = item.value;
    if (item.defaultValue == item.value)
        item.value = '';
} // ClearDefault

function SetDefault(item) {
    // if item is empty, restore the default value
    if (item.value == '')
        item.value = item.defaultValue;
} // SetDefault

$(document).ready(function() {
    $(".cleardefault")
        .mouseover(function(){
            ClearDefault(this);
        })
    $(".setcleardefault")
        .mouseover(function(){
            ClearDefault(this);
        })
        .mouseout(function(){
            SetDefault(this);
        });
    /*
    */
});
于 2009-06-23T18:36:06.967 に答える