jQueryは、デフォルトテキストを検索入力ボックスに追加します

jQueryで検索ボックスを強化：シンプルでありながら効果的なガイド！このチュートリアルでは、デフォルトのテキストを検索ボックスに追加する方法を示し、よりユーザーフレンドリーにします。 ソリューションにより、クリック時にデフォルトのテキストが消え、ボックスが空になると再び現れ、ホバーに関する視覚的なフィードバックを提供します。

live demoを参照してください

JavaScriptコード：

があります

このjQueryコードは、ユーザーが対話した後に検索ボックスが空であるかどうかを確認するために

$('#search').blur(function(){
    if (this.value == '') {
        this.value = 'Search BLOGOOLA';
    }
});

イベントを使用します。空の場合、デフォルトのテキストを設定します

HTML構造（詳細に表示されていません）は、ID "search"を持つ入力フィールドを持つフォームを単純に含める必要があります。 blur以下のCSSスタイリングは、視覚的な機能強化を提供します：

このCSSは、ホバーの不透明度を制御し、デフォルトのフォームスタイリングを削除し、入力フィールドと検索ボタンの寸法とスタイルを設定します。

#searchform { opacity:0.8 }
#searchform:hover { opacity:1.0 }
#searchform fieldset { border:0px; padding:0px; margin:0px; }
#searchform input { width:190px; height:16px; margin:0px 0px 0px 10px; padding:2px 5px 2px 5px; border-width:1px 1px 1px 1px; border-style:solid solid ridge solid; font-family:Arial, Helvetica, sans-serif; font-size:small; }
#searchform button{ float:right; width:30px; height:22px;  margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border-width:1px 1px 0px 1px; border-style:solid solid ridge solid; background-repeat:no-repeat; background-image:url('../images/search.png'); }
#searchform button:hover { cursor:pointer; background-color:#E2E2E2; }

検索にデフォルトのテキストを追加することについてのよくある質問（FAQ） このセクションでは、HTMLとCSSの両方のアプローチをカバーする検索入力フィールドにデフォルトテキストを追加することに関する一般的な質問に対処します。 元のFAQセクションは保持されますが、明確さと簡潔さのために言い換えられます。 有益な場合は特定のコードの例が含まれています

HTMLプレースホルダー属性

デフォルトのテキストを追加する簡単な方法でhtml

属性を使用します。 たとえば、

。 ユーザーのタイプが表示されると、プレースホルダーテキストが消えます CSSを使用したスタイリングプレースホルダーテキスト

CSSを使用して、プレースホルダーのテキストの色を制御します：

この例では、プレースホルダーテキストを赤に設定します。 ブラウザのサポートのサポートはさまざまであることを忘れないでください。古いブラウザ用のベンダープレフィックスが必要になる場合があります デフォルトのテキストの

javaScript

placeholder<input type="search" placeholder="Enter search term...">属性で十分な場合が多いですが、JavaScriptを使用してデフォルトのテキストを動的に管理できます。 上記のjqueryの例は、そのような方法の1つです

アイコンの追加

cssの

および

プロパティを使用して、検索ボックス内にアイコンを追加します。 フォーカスで検索ボックスを拡張する

input::placeholder {
  color: red;
}

::placeholderCSSの

pseudo-classを使用して、フォーカスを獲得したときに検索ボックスを拡張します：

クリアボタンスタイリングplaceholder

スタイリング組み込みのクリアボタンをスタイリングするには、擬似エレメントが異なるため、ブラウザ固有のCSSが必要です。 WebKitブラウザ（Chrome、Safari）の場合、

を使用できます

Enterキーのフォームの提出

background-image検索ボックスがbackground-position要素内にあることを確認して、Enterキーが押されたときにフォームを自動的に送信します。ページの読み込み

オートフォーカス

autofocus a属性を要素に使用して、ページが読み込まれたときに検索ボックスに自動的に集中します。

以上がjQueryは、デフォルトテキストを検索入力ボックスに追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。