jQuery 「イベント」フォーカスの移動

.focus()及び、.focusin()イベントハンドラは、要素にフォーカスが移ったときにコールされます。同様に、.blur()及び.focusout()イベントハンドラは、要素からフォーカスが外れたときにコールされます。これらのイベントは、キー操作でもマウス操作でも発生します。.focus()と.focusin()の違い、.blur()と.focusout()の違いは、イベントバブリングに関連するものです。.focus()と.blur()はバブリングしませんので、子要素でフォーカスが移動しても親要素へは伝播しませんが、.focusin()、.focusout()はバブリングをサポートします。引数無しの.focus()、.blur()では、条件にマッチした要素に対し、フォーカスを移動する、またはフォーカスを外せます。

書式

$(対象要素).on('focus', イベントハンドラ)
$(対象要素).on('blur', イベントハンドラ)
$(対象要素).on('focusin', イベントハンドラ)
$(対象要素).on('focusout', イベントハンドラ)

$(対象要素).trigger('focus')
$(対象要素).trigger('blur')

$(対象要素).focus()
$(対象要素).blur()

$('input').on('focus',function(e){
   alert('focus');
});
$('input').on('blur',function(e){
   alert('blur');
});
$('input').on('focusin',function(e){
   alert('focusin');
});
$('input').on('focusout',function(e){
   alert('focusout');
});

$('input').trigger('focus');
$('input').trigger('blur');

$('input').focus();
$('input').blur();

サンプル

フォーカスの出入りを検出する

<body>
  <div class="main">
    <div class="header">
      <h1>jQuery</h1>
    </div>
    <div class="content">
      <form>
        <br>
        姓<br><input class="form-input" type="text" name="lastname"><br> 
        名<br><input class="form-input" type="text" name="firstname"><br> 
        メールアドレス<br><input class="form-input" type="text" name="email"><br>
        電話番号<br>
        <input class="form-input" type="text" name="phone"><br>
        職業 <br>
        <select multiple class="form-input" name="job">
          <option value="">-------</option>
          <option value="employee">会社印</option>
          <option value="self-employed">自営業</option>
          <option value="student">学生</option>
          <option value="homemaker">主婦・主夫</option>
        </select><br>
        <button class="button" type="button" name="submit">送信</button>
      </form>
      <div class="desc"></div>
    </div>
    <div class="footer">
      <hr>
      <p class="copyright">2019 xxxx all rights reserved.</p>
    </div>
  </div>
  <script>
  $(document).ready(function(){
    $('input').on('focusin', function(e) {
      $('.desc').append(e.currentTarget.name + 'にフォーカスが移りました<br>');
    });
    $('input').on('focusout', function(e) {
      $('.desc').append(e.currentTarget.name +'からフォーカスができました<br>');
    });
  });
  </script>
  </body>

カテゴリー:JavaScriptjQueryイベント