検索窓に入力したキーワードを、検索結果ページの検索窓に継承して表示する方法についての忘備録。
このサイトでは CGI プログラムで記事検索を実行している。通常、検索結果を表示するページの検索窓には placeholder で設定した文字列が表示される。しかしこのままだと、別のキーワードを追加して絞り込むような場合、元のキーワードを再入力するのに手間がかかる。そこで、検索窓に入力したキーワードを、検索結果ページの検索窓に継承して表示するようにしてみた。 検索プログラムでは、検索窓に入力した文字列が変数 $word に格納されているので簡単にできると思いきや・・・ my $myword = $word; # ⇐ $word にキーワードの文字列がセットされたら $myword に保存する。 <input class=¥"input-search¥" type=¥"text¥" name=¥"WORD¥" value=$myword /> とすると、$word にスペースが含まれている場合、最初のスペース以降の文字列が消えてしまう。 これは、のが原因。 <input class=¥"input-search¥" type=¥"text¥" name=¥"WORD¥" value=¥"$myword¥" /> とすればよい。解決してしまえばなんてことないが、ちょっと手こずった。 念のため、キーワードを入力しないまま検索を実行した場合に備えて placeholder に注意書きを設定している。 placeholder をクリックしたら空にし、フォーカスが外れたら再表示するには、CSS に以下を記述する。 input:focus::-webkit-input-placeholder { color: transparent; } input:focus::-moz-placeholder { color: transparent; } input:focus::-ms-input-placeholder { color: transparent; } input:focus::placeholder { color: transparent; } なお、現状ではキーワードにクォーテーションマーク（"）が含まれているとヒットしない。これは、ため当然のこと。また、例えば "<a" が含まれていると、ページのレイアウトが崩れてしまうなどの現象も起こる。そこで、$word に都合の悪い文字が含まれる場合、$word か $myword を適宜ブランクにすることにより回避した。