input type=”number” でonchangeイベントが発生しない

Tweet

Category JavaScript 2019/08/04

問題

input type=”number” で、上下の矢印をクリックされるとonchangeイベントが発生しないです。

<input type="number">

blurなどではなく、入力があったら都度処理をしたいのですが、できないですか？

答え

対応例 1

keyup と mouseup を仕掛けておくと可能。

$('input[type="number"]').bind('keyup mouseup', function () {
    console.log('changed');            
});

対応例 2

input イベントでも対応可能。

$('input[type="number"]').bind('input', function () {
    console.log('changed');            
});

inputイベントのほうが、Shiftキーだけを押したときや値に無関係な箇所をクリックしたときには発火しないで、矢印部分をクリックしたときだけ発火するので、よりスマートでしょう。