CODEWITHSUNDEEP
javascriptjqueryhtml
Ali
Ali

Reputation: 1336

How to prevent special characters copy paste on number field

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
OTP: <input type="number" id="otp_number" data-ignorepaste="" />

Upvotes: 2

Views: 5946

Answers (2)

Carsten Massmann
Carsten Massmann

Reputation: 28196

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.com/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">

Upvotes: 5

Kaiido
Kaiido

Reputation: 136736

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 combinations, 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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
OTP: <input type="number" id="otp_number" data-ignorepaste="" />

Upvotes: 1

Related Questions