Allow to enter particular characters only

<input type="text" id="input" />

const ele = document.getElementById('input');

ele.addEventListener('keypress', function (e) {
    // Get the code of pressed key
    const key = e.which || e.keyCode;

    // 0, 1, ..., 9 have key code of 48, 49, ..., 57, respectively
    // Space has key code of 32
    if (key != 32 && (key < 48 || key > 57)) {
        // Prevent the default action
        e.preventDefault();
    }
});

// Track the current value
let currentValue = ele.value || '';

ele.addEventListener('input', function (e) {
    const target = e.target;

    // If users enter supported character (digits or space)
    /^[0-9\s]*$/.test(target.value)
        ? // Backup the current value
          (currentValue = target.value)
        : // Otherwise, restore the value
          // Note that in this case, `e.preventDefault()` doesn't help
          (target.value = currentValue);
});

// Track the current cursor's position
const selection = {};

ele.addEventListener('keydown', function (e) {
    const target = e.target;
    selection = {
        selectionStart: target.selectionStart,
        selectionEnd: target.selectionEnd,
    };
});

ele.addEventListener('input', function (e) {
    const target = e.target;

    if (/^[0-9\s]*$/.test(target.value)) {
        currentValue = target.value;
    } else {
        // Users enter the not supported characters
        // Restore the value and selection
        target.value = currentValue;
        target.setSelectionRange(selection.selectionStart, selection.selectionEnd);
    }
});