Parse the content we get from copy and paste using jquery

85
January 01, 2020, at 2:40 PM

I am working on a project and I am stuck on a very weird issue. I have to restrict what content we receive from copy and paste on an input box. For instance, if only numbers are allowed in the input boxes. I would like user to not be able to paste anything other than numbers. Or if they paste anything and leave the input box then remove anything that is not a number. Is it possible using jquery?

<input onKeyPress="return filterNumber(event)" type="text" id="phone">
function filterNumber(evt){
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

The above function 'filterNumber' won't allow user to enter anything other than number while they type. But it won't prevent them from pasting anything like alphabets, symbols and numbers.

I tried google but I didn't find any solution for this.

Can anyone help?

Answer 1

You can use regex to do that.

Or if they paste anything and leave the input box then remove anything that is not a number

In this example, when user enters some text to the input (including copy-paste), we get and remove/replace all of the characters which are not numeric.

function filterNumber(input){ 
  input.value = input.value.replace(/\D*/g, ''); 
}
<input oninput="return filterNumber(this)" type="text" id="phone">

Answer 2

First of all, don't listen for key events for pasting. What if I paste with the mouse? There's a dedicated paste event.

The second advantage of this approach is that the event data contains clipboard data, which you can retrieve and interrogate before you even allow it into your text field.

let ta = document.querySelector('textarea');
ta.addEventListener('paste', evt => {
    let pasted = evt.clipboardData.getData('text/plain');
    if (/\D/.test(pasted)) { //<-- contains any non-numeric chars?
        evt.preventDefault();
        alert('Only numbers allowed, matey!');
    }
});

If the pasted input contains non-numeric characters, we cancel the operation by suppressing the event's default action (which is, of course, to paste the text.)

Fiddle

READ ALSO
How to auto fill the address by using the postcode?

How to auto fill the address by using the postcode?

I want the user just enter their address's postcode without select any region because it will auto fillBut, I don't have an idea how to do it

91
How to make roundSlider and Jquery-UI slider responsive and work with boostrap

How to make roundSlider and Jquery-UI slider responsive and work with boostrap

I am trying to put together a Boostrap 4 card that has thermostat control user interfaceBelow are parts of my code (full code is here: https://jsfiddle

106
Animation in JavaScript/jQuery with arrays

Animation in JavaScript/jQuery with arrays

I'm trying to display an animation for every object in an arrayI have some difficulties to "connect" all codes and scripts

111