JSFiddle - React, Tailwind, and code Playground

HTML

<input type="number" id="integer" />

JavaScript

(function () {
    var cancelEvent = function (e) {
        e.preventDefault();
        return false;
    },
    restrictToInteger = function restrictToInteger(e) {
        var acceptableInput = /[0-9]/g,
            clipboardKeys = /[zxcv]/ig,
            field = e.key || e.char,
          isClipboardOperation = (clipboardKeys.test(field) && e.ctrlKey),
            inputIsAcceptable = field ? (
                acceptableInput.test(field)
                || field.length > 1
                || isClipboardOperation
            ) : true;

        if (!inputIsAcceptable) {
            cancelEvent(e);
        }
    },
    ensureIntegerValueOnPaste = function ensureIntegerValueOnPaste(e) {
    	var data = e.clipboardData || e.dataTransfer,
      		text = data.getData('text'),
            int = parseInt(this.value + text, 10);

        if (isNaN(int)) {
            cancelEvent(e);
        } else {
            window.setTimeout(function () {
                e.target.value = int;
            }, 0);
        }
    },
    input = document.getElementById("integer");

    input.addEventListener('keydown', restrictToInteger);
    input.addEventListener('drop', ensureIntegerValueOnPaste);
    input.addEventListener('paste', ensureIntegerValueOnPaste)
}());