を使用<input type=number>するとthis.value、入力が有効な数値でない場合、イベント リスナー内で空の文字列が返されます。この例は、http://jsfiddle.net/fSy53/で確認できます。
ただし、無効な文字は引き続き入力に表示されます。
イベントリスナー内から、無効な文字を含め、実際に表示される値を取得する方法はありますか?
私の最終的な目標は、ユーザーが実際に数値以外の文字をフィールドに入力できないようにすることです。type=number数値仮想キーボードがモバイル デバイスで使用されるように使用する必要があります。this.value = this.value.replace(/[^0-9.]/g, "")私の目標はonのようなことをすることですが、無効な文字が入力された場合、 from からの読み取りが返さkeyup keypressれるため、これは機能しません。this.value""
着信キー値が気に入らない場合は、デフォルトの動作を防止してみてください。
document.querySelector("input").addEventListener("keypress", function (evt) {
if (evt.which < 48 || evt.which > 57)
{
evt.preventDefault();
}
});
これは、数値以外の値に対して keyPress イベントが発生しないようにすることで実現できます。
例（jQueryを使用）
$('.input-selector').on('keypress', function(e){
return e.metaKey || // cmd/ctrl
e.which <= 0 || // arrow keys
e.which == 8 || // delete key
/[0-9]/.test(String.fromCharCode(e.which)); // numbers
})
これは、すべての異なるタイプの入力 (たとえば、テンキーからの入力はキーボードとは異なるコード) だけでなく、バックスペース、矢印キー、control/cmd + r によるリロードなども考慮します。
受け入れられた回答の更新：
多くのプロパティが廃止されるため
(プロパティ) KeyboardEvent.which: number @deprecated
keyプロパティに依存して、残りのロジックを自分で作成する必要があります。
このコードでは、Enter、Backspace、およびすべての数字 [0 ～ 9] を使用できますが、その他のすべての文字は使用できません。
document.querySelector("input").addEventListener("keypress", (e) => {
if (isNaN(parseInt(e.key, 10)) && e.key !== "Backspace" && e.key !== "Enter") {
e.preventDefault();
}
});
注: これにより、貼り付け操作が無効になります
Nrzonline の回答に基づいて: 複数の "." の問題を修正しました。入力の最後に
let lastCharacterEntered
入力の外側、次に onKeyPress
e => {
var allowedChars = "0123456789.";
function contains(stringValue, charValue) {
return stringValue.indexOf(charValue) > -1;
}
var invalidKey =
(e.key.length === 1 && !contains(allowedChars, e.key)) ||
(e.key === "." && contains(e.target.value, "."));
console.log(e.target.value);
invalidKey && e.preventDefault();
if (!invalidKey) {
if (lastCharacterEntered === "." && e.key === ".") {
e.preventDefault();
} else {
lastCharacterEntered = e.key;
}
}
}
それを試してみてください：
document.querySelector("input").addEventListener("keyup", function () {
this.value = this.value.replace(/\D/, "")
});