JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでHTMLの検索ボックスにデフォルトの検索テキストを追加する方法

HTMLの検索ボックスにデフォルトのテキスト（初期値）を表示したい場合、「placeholder」という概念を利用するのが一般的です。さらにJavaScriptを組み合わせることで、ユーザーが入力欄をクリック（フォーカス）したときにデフォルトテキストを自動的に消すこともできます。

実装のポイント

  • placeholder属性： 入力欄に薄いグレーでヒントテキストを表示します。入力を始めると自動的に消えます。
  • valueプロパティ： JavaScriptから初期値として実際のテキストを設定できます。
  • onfocusイベント： フォーカスされたときの動きを制御し、条件に応じて値をクリアします。

以下が具体的なサンプルコードです。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="textSearch" placeholder="Search the value" />
<script>
    var yourText= "John";
    var textBoxSearch = document.getElementById("textSearch");
    textBoxSearch.value = yourText;
    textBoxSearch.onfocus = function() {
        if (this.value == yourText) {
            this.value = '';
        }
    }
</script>
</body>
</html>

コードの解説

  1. まず変数 yourText にデフォルトで表示したい文字列（ここでは「John」）を代入します。
  2. getElementById() を使って検索ボックスの要素を取得し、value プロパティにデフォルトテキストを設定します。
  3. onfocus イベントハンドラにより、ユーザーが検索ボックスをクリックしたタイミングで、値がまだデフォルトテキストのままなら空文字に置き換えます。

実行方法

上記のプログラムを実行するには、ファイル名を index.html など任意の名前で保存してください。その後、VS Codeエディタで該当ファイルを右クリックし、「Open with Live Server」を選択してブラウザで開きます。

出力結果

ページを表示すると、検索ボックスにはあらかじめ「John」というデフォルトテキストが入力された状態で表示されます。

次に、検索ボックスをクリックすると、デフォルトのテキストは消去され、placeholder属性で指定した「Search the value」というヒントテキストが薄く表示されます。この状態ですぐに入力を始めることができます。

補足：placeholderだけでも十分なケースも

単純にヒントを表示したいだけであれば、placeholder属性だけで目的を達成できます。JavaScriptによるvalue設定が必要になるのは、「ページ読み込み時に実際の検索語（デフォルト値）を入力済みの状態にしたい場合」や「特定の条件下でのみ初期値を消したい場合」などです。用途に応じて使い分けるとよいでしょう。

  1. JavaScriptでinnerHTMLを設定する方法をわかりやすく解説

    JavaScriptでHTML要素の内容を動的に書き換えたい場合に便利なのが、innerHTMLプロパティです。innerHTMLを使えば、指定した要素の中にHTML文字列をそのまま挿入・置き換えることができます。本記事では、innerHTMLを設定する正しい構文と、実際に動作するサンプルコードを初心者向けに解説します。 innerHTMLを設定する正しい構文 innerHTMLを設定する際の正しい構文は以下のとおりです。 document.getElementById(yourIdName).innerHTML=yourValue; この構文では、まずgetElementById()メソッド

  2. JavaScriptでテキストボックスの入力値を取得して表示する方法

    JavaScriptでは、valueプロパティを使ってテキストボックスに入力された値を取得し、innerHTMLを使うことでその値を段落（<p>要素）に表示することができます。この仕組みは、フォームの入力内容をリアルタイムに画面へ反映させたい場合などによく使われる基本的なテクニックです。 コード例 以下が実際のサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">