[JavaScript] 数字しか入力できないInputを実装する方法

仕様

• 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 = "";
  }
});