検索フィールドのデフォルト値を設定-助けてください！

StackOverflow https://stackoverflow.com/questions/1034281

  •  06-07-2019
  •  | 
  •  

質問

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

これを試しました

<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と関係があると思います。アイデアはありますか？

ありがとう！

役に立ちましたか？

解決

これは透かしとして知られています。 http://digitalbush.com/projects/watermark-input-plugin/ をご覧ください。例のために

他のヒント

別のアイデアは、入力タイプにプレースホルダーを入れることです： （これはHTML5であることに注意してください。）

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

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

ハードコードされたデフォルト値「Search」を与えるだけで、

<input ... type="text" value="Search" />

入力タグで直接初期値を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に設定していることに注意してください。

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

とにかくありがとう！

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

<input autocomplete="off" class="blank" ....

これを行うために使用するスニペットを次に示します。もっと簡単な方法もありますが、これは機能します。クラス.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);
        });
    /*
    */
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top