SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

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

問題

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キーだけを押したときや値に無関係な箇所をクリックしたときには発火しないで、矢印部分をクリックしたときだけ発火するので、よりスマートでしょう。

関連するメモ

コメント