検索キーワードをあらかじめランダムで入力欄に表示させておく方法

運営サイトの検索フォームの入力欄にあらかじめ検索キーワードを表示しておきたい。「検索キーワードを入れてください」のような説明的文言ではなく、検索キーワードそのものを入れることで説明に代えようと思います。検索キーワードは固定しない。複数の検索候補の中からランダムで選択することにします。

目次
  1. ランダムで表示するためのコード
    1. PHP による実装
    2. JavaScript による実装
  2. 入力欄のフォーカス時に非表示にする
    1. ランダム表示を PHP で実装した場合
    2. ランダム表示を JavaScript で実装した場合
    3. JavaScript 不許可の環境での挙動
  3. 実装サンプルページ

ランダムで表示するためのコード

対象となる input 要素の value 属性の値が表示される検索キーワードになります。この値にランダムで検索キーワードを設定します。PHP でも JavaScript でも同様の方法で実装できます。

PHP による実装

HTML の方は、value 属性の値を変数にしておきます。

<input name="keyword" value="$word" />

表示させたい検索キーワードを配列にし、mt_rand() 関数で生成した乱数を用いて配列キーを決めます。

$word_list = array(
  'PHP',
  'HTML',
  'CSS',
  'JavaScript',
  'htaccess'
);

$word = $word_list[mt_rand(0, 4)];

JavaScript による実装

value 属性は省略、もしくは値を空にして記述します (値がある場合、JavaScript 不許可の環境ではその値が表示されます)。

<input name="keyword" />

Math.floor と Math.random メソッドを使い、ランダムな整数を取得します。以下では、name 属性を利用して input 要素を参照して値をセットしています。

var word_list = [
  'PHP',
  'HTML',
  'CSS',
  'JavaScript',
  'htaccess'
];

var word = word_list[Math.floor(Math.random() * 5)];
document.forms[0].keyword.value = word;

入力欄のフォーカス時に非表示にする

検索キーワードがあらかじめ入力されていると、別のキーワードを入力する時には削除しなくてはなりません。この手間を減らすため、入力欄になっている input 要素へのフォーカス時には元のキーワードが非表示になるように HTML と JavaScript で設定します。

フォーカスを失った時に入力欄が空ならば選ばれた検索キーワードの値を表示し、フォーカスが与えられた時にキーワードの値と同じならば空欄にすることで実現します。

ランダム表示を PHP で実装した場合

input 要素にイベントハンドラを追加します。onFocus 属性はフォーカスが与えられた時に、onBlur 属性はフォーカスを失った時に発生するイベントです。

<input name="keyword" value="$word" onFocus="hide_word(this);" onBlur="show_word(this);" />

PHP の出力時に $word を JavaScript のユーザー定義関数に設定します。

function hide_word(w){
  if (w.value == "$word") w.value = '';
}

function show_word(w){
  if (w.value == '') w.value = "$word";
}

ランダム表示を JavaScript で実装した場合

input 要素にイベントハンドラを追加します。

<input name="keyword" onFocus="hide_word(this);" onBlur="show_word(this);" />

JavaScript 側では、現在の検索キーワードが値となっている変数 word を参照します。検索キーワード生成時のコードで word がグローバル変数になるようにしておきます。

function hide_word(w){
  if (w.value == word) w.value = '';
}

function show_word(w){
  if (w.value == '') w.value = word;
}

JavaScript 不許可の環境での挙動

JavaScript を許可していない環境の場合に、PHP で実装していたとしたらどうなるでしょう？　その時は、ランダムで選ばれた検索キーワードがあらかじめ入力されていて、フォーカスをしてもその文字が消えない。そのような不親切な状況になります。ですから、そうした環境を考慮するのであれば、キーワードのランダム生成のほうも JavaScript で実装したほうが良さそうです。JavaScript が不許可の時には、ただ空欄になっているだけなのですから。

実装サンプルページ

今日学んだこと

検索フォームの入力欄にランダムで検索キーワードを入れておく方法。および、(非) フォーカス時の入力欄の制御。