検索フィールドのデフォルト値を設定する - お手伝いください！

Question

検索フィールドのデフォルト値を設定しようとしています。ユーザーがクリックするまでSearch-Fieldの値が「Search」になってから、空でなければなりません。また、「空白」（値として「検索」がある）である限り、クラス「.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と関係があると思います。何か案は？

ありがとうございます！

Answer 1

これは透かしとして知られています。あなただけそうのように、直接入力タグで、Searchに初期値を設定する必要がありますように「検索」ハードコードされ、

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

Answer 2

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

ありがとうございました！

Answer 3

ぼかしは、フィールドがフォーカスを失ったときに、フォーカスが合ってから始まるようになるまでゆるやかなフォーカスがないので、フィールド内をクリックしてから、それをクリックして動作するようにします。デフォルトでクラスを.blankに設定しようとしましたか？

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

Answer 4

ためhttp://digitalbush.com/projects/watermark-input-plugin/を参照してください：

<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に設定しています。

Answer 5

のように聞こえるちょうどそれをデフォルト値を与える例

Answer 6

これは私がこれを行うのに使うスニペットです。簡単な方法があるかもしれませんが、これは機能します。 .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); 
     }); 
    /* 
    */ 
}); 

Answer 7

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

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

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