以前はjQueryで実装していたが、JavaScriptで再実装し記事をリライト

仕様

  • 0〜9までの数値のみを許容する
    入力完了後に文字列を削除
  • ペースト許容しない
  • ドラッグ&ドロップ許容しない

デモ

実装

let input = document.querySelector(".numeric-input");

// disable event function
const disableEvent = e => {
  e.preventDefault();
  e.stopPropagation();
};

// disable paste
input.addEventListener("paste", disableEvent);

// disable drag&drop
input.addEventListener("drop", disableEvent);

// remove string
input.addEventListener("keyup", function(e) {
  let tmp = [];

  this.value.split("").forEach(function(item, i) {
    if (item.match(/[0-9]/gi)) {
      tmp.push(item);
    }
  });

  if (tmp.length > 0) {
    this.value = tmp.join("");
  } else {
    this.value = "";
  }
});