【jQuery】テキストボックスが空白だった場合、Enterキーを押しても処理しない機能の実装 | 電網覚書

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から3年以上経過しています。

とあるサイトの検索部分、テキストボックスが空白でEnterキーを押すと検索を実行し全件表示してしまうという不具合を見つけてしまいました・・・。

<input class="searchinput" type="text" placeholder="Keyword" name="key">

これはさすがにまずいので、とりあえずの対応として空白の場合、Enterキーを押しても処理しない処理を実装しました。

$(function(){
  //バリデーション
  $('.searchinput').keypress( function ( e ) {
    if ( e.which == 13 ) {
    let error;
    let value = $(this).val();
    if(value == "")
    {
      error = true;
    }
    else if(!value.match(/[^\s\t]/))
    {
      error = true;
    }

    if(error)
    {
      //エラー時の処理
      return false;
    }
  }
  });
});

何かしら文字が入力されていれば検索が実行されるのでこれでよしとしましょう・・・。