Prevent pasting wrong values into Input number type

If you want to reject any input other than 0-9 and ., try this:

Array.from(document.getElementsByClassName('restricted')).forEach(elem => {
  elem.addEventListener('input', event => {
    event.target.value = event.target.value.replace(/[^0-9\.]/g, '');
  });
});

<input type="text" class="restricted">

You can add .restricted to any input to achieve the same effect once this script is in place. Unfortunately, this trick won’t work with input[type="number"], because event.target.value is '' whenever an invalid input state is detected.

Without javascript

:invalid {
  color: red
}

<form method="post" action="https://httpbin.org/post">
  <input type="number" name="num" pattern="[0-9]*[.,]?[0-9]+" min="0" step="any">
  <!-- you won't be able to submit when the form is invalid -->
  <input type="submit">
</form>

PS (browser take care of normalizing the , to .)

I have countered something similar, i used regex to filter the entered value of any characters only accepts numbers. the down side to this solution is that it only accept integer numbers not numeric. here is a code example:

handleChange = (e) => {
    const re = /^[0-9\b]+$/;
    if (e.target.value === '' || re.test(e.target.value)) {
         this.setState({Number: e.target.value})
      }
  }

I'm using reactjs for this example, but of course you can adjust the code to serve your purpose

Use this:

It allows you to use any kind of input filter on a text , including various numeric filters. This will correctly handle Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations, non-typeable keys, and all keyboard layouts.

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input name="someid" onkeypress="return isNumberKey(event)"/>

try this event:

Pasting:

https://developer.mozilla.org/en-US/docs/Web/Events/paste

Draging:

https://developer.mozilla.org/en-US/docs/Web/Events/drag

maybe look at this:

How do I make control characters programatically in Javascript?

EDIT:

document.getElementById('id').addEventListener('paste', (e) => {
  let pre = e.target.value;
  window.setTimeout(() => {
    console.log(pre);
    console.log(e.target.value);
    /*
    Get the pasted value here, and edit the input
    */
  });
});