8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

キーボードで操作した場合でもセレクトイベントを取得する

Posted at

セレクトボックスの変更時のイベントを取得するとき、カーソルキーで値を変更するとイベントが発生しない。
正確にはフォーカスが外れるか、Enterキーが押されるまでイベントが発生しないようだ。(Firefox12, Safari5で確認)
「セレクトボックスを開いてメニューを表示してから、カーソルキーで値を選択し、Enterを押す」という操作しか考慮していないっぽい。
セレクトボックスの値に応じてscriptでformの内容を修正していたりすると、マウスでSubmitを押したときにイベントが発生するため、ユーザの意図しない動作をする可能性がある。

対処としては、keyupイベントでフォーカスを一度外す。
jQueryではこんな感じ。

  $('select').change(function(){
    alert("select changed");
  }).keyup(function(){
    $(this).blur().focus();
  });
8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?