onkeyupとnumber typeの入力のためのonchange

Question

私は、フォーム上の数値入力を扱う小さな問題を抱えています。特に、ユーザーがそれらを変更したときに検証js関数を呼び出そうとしています。

このメソッドは、ボックスに数字を入力した場合にのみ呼び出され、ユーザーがブラウザで指定された上/下ボタンを使用すると無視されます。だから完全に効果的ではありません。

<input type="number" name="somenumber" onchange="validateForm()" /> 

この方法では、アップ/ダウンボタンを使用して、ユーザーのための素晴らしい作品が、彼らはボックスに数字を入力した場合、彼らは別の要素に移動したり、ボックスの外側をクリックするまで、それは実行されません。これは世界の終わりではありませんが、ボタンを有効にするために他の場所をクリックする必要はなく、ユーザーがボックスに入力してすぐに現在無効になっている送信ボタンをクリックできるようにしたいと考えています。

<input type="number" name="somenumber" onchange="validateForm()" onkeyup="validateForm()" /> 

私はこれをやっています。問題は、関数がしばしば2回呼び出されるということです。それは私が推測するうまく動作します。ユーザーはそれが2回実行されていることに気付かない。それでも、私は何かが欠けているようで、これに対処するための「正しい」方法があるはずです。

はありますか？それとも、これは私たちが回避しなければならないものの一つですか？

Answer 1

イベントを使用できます。完璧だ

function validateForm() { 
 
    console.log('changed'); 
 
}

<input type="number" name="somenumber" oninput="validateForm()" />