I want to copy paste only numbers in 'number field'. If I didn't prevent copy paste I can copy the 'e','+','-' and '.' in the number field. In the number field, I can type those characters so I have used another script. I want to type and copy paste only numbers.

Please check the code:

jQuery("#otp_number").bind("cut copy paste", function(e) {
  e.preventDefault(); //prevent the default behaviour 
});
document.querySelector("#otp_number").addEventListener("keypress", function(evt) {
  if (evt.which != 8 && evt.which != 0 && evt.which < 48 || evt.which > 57) {
    evt.preventDefault();
  }
});

<script src=".1.1/jquery.min.js"></script>
OTP: <input type="number" id="otp_number" data-ignorepaste="" />

I want to copy paste only numbers in 'number field'. If I didn't prevent copy paste I can copy the 'e','+','-' and '.' in the number field. In the number field, I can type those characters so I have used another script. I want to type and copy paste only numbers.

Please check the code:

jQuery("#otp_number").bind("cut copy paste", function(e) {
  e.preventDefault(); //prevent the default behaviour 
});
document.querySelector("#otp_number").addEventListener("keypress", function(evt) {
  if (evt.which != 8 && evt.which != 0 && evt.which < 48 || evt.which > 57) {
    evt.preventDefault();
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
OTP: <input type="number" id="otp_number" data-ignorepaste="" />

• javascript
• jquery
• html

• Don't use bind, use on instead. Also, e.which is deprecated and should not be used any more. developer.mozilla/en-US/docs/Web/API/KeyboardEvent/which – connexo Commented Aug 6, 2018 at 5:14
• Possible duplicate of Disable copy paste of alphabets in text field using jquery – NullPointer Commented Aug 6, 2018 at 5:16
• You can use contextmenu to disable part of page – Mohammad Raheem Commented Aug 6, 2018 at 5:28
• Can you the users paste every thing? It seems a little bit irrational that users paste some characters like +. Maybe you want remove invalid characters from input when they paste a string includes these characters. – Ali Soltani Commented Aug 6, 2018 at 5:46

2 Answers 2

jQuery("#otp_number").on("paste", function(e) {
  if (e.originalEvent.clipboardData.getData('text').match(/[^\d]/))
    e.preventDefault(); //prevent the default behaviour 
})
.on("keypress", function(e) {
  if (e.keyCode != 8 && e.keyCode != 0 && e.keyCode < 48 || e.keyCode > 57) 
     e.preventDefault();
});

You don't need to restrict the copy or cut actions. It is quite enough to apply a test on the paste event. The event is prevented only when a non-numeric character is found in the clipboard that is about to be pasted.

I haven't had the time to test this, so, please, try and improve where necessary.

Edit:

I was surprised that my original answer got so much positive feedback. However, here is an alternative version which I believe is a bit more tolerant and user-friendly. It allows the input of any conceivable character at first (per input or paste) and removes all non-numerical characters afterwards:

jQuery("#otp_number").on("paste keyup",function(e){
   $(this).val(this.value.replace(/[^\d]/g,''))  
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="other" placeholder="anything"><br>
<input type="text" id="otp_number" placeholder="numbers only">

What you want is to access the content of the clipboard before it gets added to your input.

To do this, you would normally look into the DataTransfer object that is being passed along the ClipboardEvent.clipboardData property.
But all browsers don't support this, so you'll also have to handle special IE case which exposes it on the global Window object.

Note that I had to modify a bit your onkeypress handler so it doesn't block ctrl + v binations, but IMO this function would probably benefit from a full refactoring anyway...

jQuery("#otp_number").on("paste", function(e) {
  var dT = e.originalEvent.clipboardData || window.clipboardData;
  var text = dT.getData('text');
  if(parseInt(text) !== +text) { // allow only Ints
    e.preventDefault(); //prevent the default behaviour 
  }
});

// that one would probably need some refactoring...
document.querySelector("#otp_number").addEventListener("keypress", function(evt) {
  if(!evt.ctrlKey && !evt.metaKey && // don't block ctrl + v
    evt.which != 8 && evt.which != 0 && (evt.which < 48 || evt.which > 57)) {
    evt.preventDefault();
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
OTP: <input type="number" id="otp_number" data-ignorepaste="" />