5

例

にテキストを入力し<input type="number"/>ても変更イベントがトリガーされないようです。ユーザーに入力を修正するように警告できるように、変更イベントが必要です。これに対する変更イベントを取得し、現在の値を取得して不正な入力を確認するにはどうすればよいですか?

私はChromeでテストしています。

$('input').on('change', function() {
    alert('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
put letters in me and press tab: <input type="number"/>

4

3 に答える 3

10

次に、他のキーボード イベントを使用してみてください。たとえば、私はちょうど追加しました

$("input").on('keyup', function() {
    alert('keyup' + $(this).val());
})

JSFiddle の例に、テキストボックス内でalert押すと が表示されます。anumber

注: チェック$(this).val()しても無効な文字は返されません (少なくとも Chrome では)。結果を返す前に無効な値を削除します (たとえば、1a空白になります)。これはchange、入力がすべて無効であるため、値が実際に変更されていないときにイベントが発生していないように見える理由でもあります。無効な文字をキャッチするには、代わりにイベントのkeyCode:

$("input").on('keyup', function(e) {
    if (e.keyCode < 48 || e.keyCode > 57) {
        // not 0-9 (note: ignores -)
        alert('error!');
    }
});

もう少しいじった後、Chrome と IE10 の動作は似ていることに気付きましたが、IE10 にはストリッピングにバグがあるようです。

数値以外で入力を開始するnumberと、IE10 (おそらく 9 も) は、その後に続く文字に関係なく、残りの入力を有効な数値と見なします (たとえば、IE の目1a2と同じように有効です)。 12. ただし、Chrome では、数字以外を入力すると、すぐに入力が無視され、無効であると宣言されます。IE10 では、数値以外で開始した場合の動作は同じです。

動作の大きな違いの 1 つは、IE10 が の後blurに無効な数値フィールドをクリアすることですが、ここでも、フィールドが数値以外で始まる場合にのみ無効と見なします (例: a1)。 -は数字の前に置くことができますが、複数の数字は使用できません。

どちらのブラウザでも、numberが無効であると見なされた場合、 this.value(結果的$(this).val()に ) は空白を返します。numberIE10 では、が数字 ( ) で始まる場合、生の無効な値を取得できます0-9。両方のブラウザーは、入力が実際に変更されたと見なされた場合にのみchangeイベントを発生させます。つまり、IE10 の場合、ユーザーが入力してから入力abcdをblurs すると、IE10 はフィールドをクリアし、有効な値があればchangeイベントを発生させます。変更前の値です。Chrome では、入力が有効かどうかに関係なく変更が発生します。無効な場合は、空白の値に変更されます。

つまり、有効な数値入力と無効な数値入力を処理できますが、ユーザーがテキスト ボックスに入力した実際の値を確実に取得することはできません。

HTML

put letters in me and press tab:
<br />
<input type="number"/>
<br />
<p id="event" />
<p id="text" />

JavaScript

function checkValid(e) {
    var $this = $(this);
    $("#event").text(e.type);
    $("#text").html("this.value: " +
                    this.value +
                    "<br />$(this).val(): " +
                    $this.val() + "<br />$(this).is(:valid): " +
                    $this.is(":valid") +
                    "<br />$.isNumeric(this.value): " +
                    $.isNumeric(this.value)); // <- helps check
}

$('input[type="number"]').on('change', checkValid).on("keyup", checkValid);

をチェックすることで、有効な番号かどうかを確認できます$.isNumeric。および疑似クラスは、フィールドが としてマークされている場合を除き、IE10 では機能しません:valid( IE9ではまったく機能しません) 。:invalidnumberrequiredrequired

于 2013-04-19T18:46:47.247 に答える
0

イベントの変更はフォーカスを失ったときにトリガーされ、想定どおりに機能しています。使用する必要がある場合がありますkeyup。

ライブデモ

$('input').on('keyup', function() {
    alert('change');
});
于 2013-04-19T18:48:12.197 に答える