×

検索ボックスが未入力時にEnterキー、検索ボタンによるsubmitを無効にする小技

2017年5月15日 コーディング

検索機能

検索エンジンを始めとして、多くのWebサイトでユーザーが目的のページをキーワードで探せるように検索ボックスを設置しています。

通常、検索ボックス(input:text)にフォーカスされている状態で、enterキーを押下すると、フォームがsubmitされます。

これはキーワードが未入力の状態でも同様です。
そこで、キーワード未入力時には検索を実行させたくないという方向けに、検索ボックスが空の時に、enterキーによるsubmitを無効にする小技を紹介します。

動作の仕様と考え方

まずは今回の動作の仕様をまとめます。

【動作の仕様】

  • inputタグのtype属性がtextの検索キーワード入力欄を1つ設置
  • inputタグのtype属性がsubmitの検索ボタンを1つ設置
  • キーワード入力欄が未入力(全角・半角スペース、タブ、改行のみの入力を含む)の場合、submitしない
  • jQueryを使用する

【動作の考え方】

Enterキーを押下もしくはsubmitボタンをクリックした時に、フォームがsubmitされます(submitイベントが発生)。

このsubmitイベント発生時に、キーワード入力欄の中身をチェックして、入力されていればそのままsubmit、未入力ならsubmitしないという判断を行います。

検索窓が空かどうかをチェックするタイミングがポイントになります。

【サンプル】

下記のサンプルDEMO1をクリックして動作確認をしてください。

DEMO1

キーワード入力欄が未入力(全角・半角スペース、タブ、改行のみの入力を含む)の状態で、Enterもしくは検索ボタンクリックしても何も起こらず、何かしらの文字列を入力すると、URLにパラメータ「?q=(入力した文字列)」が付加されるはずです。

コーディングで実装

仕様に沿って実装します。

HTMLでコーディング

HTMLで簡易的な検索ボックスを構成します。

	

jQueryでキーワード入力欄をチェックし、submitを制御する

jQueryを使用して、キーワード入力欄の入力内容をチェックして、submitさせるかどうかを制御します。

	
	

jQueryを読み込みます。

	

1.フォーム要素の取得
submitの対象となる検索ボックスのフォーム要素を取得します。

2.フォームのsubmitイベントを取得
.submit()メソッドの中でfunctionを使うことで、submit前に入力内容のチェックや加工が可能になります。

3.入力されているキーワードを取得し、正規表現により未入力かどうかを判別する
.val()メソッドで入力されたキーワードを取得し、.match()メソッドと正規表現によって未入力(全角・半角スペース、タブ、改行のみの入力を含む)かどうかをチェックします。
未入力の場合はそのままsubmit、入力されている場合、falseを返してsubmitを無効にします。

※ここでの「/^[  \r\n\t]*$/」は、全角スペース、半角スペース、復帰文字、改行文字、タブ文字が0回以上連続している文字列を指します。

まとめ

シンプルなjQueryで、未入力時のsubmit無効が実現できました。

正規表現のところを変更することで、未入力以外でもsubmitさせる条件を変更させることができます。

検索キーワードが未入力でも普通に検索できるサイトはたくさんあるので、特に必要な処理ではありませんが、もし未入力での検索は禁止したいという場合は、この方法を使ってみてください。

関連記事