How to prevent textbox from copying letters into that?

Question

I am currently working on a C# MVC project. While entering user details into database I need to customize my MobilePhone field to only accept numbers. After some searching I found the below code :

$(document).on("keypress","#MobilePhone", function (e) {
    var regex = new RegExp("^[0-9]\d*$");
    var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
    if (regex.test(str)) {
        return true;
    }
    e.preventDefault();
    return false;
});

This code works for me, It only allows numbers to be entered in the Textbox.

But there is a problem, If a user copy some text and then paste the content in the Textbox nothing happens. Then if I press submitt button it submits and occur error.

So then I found this question :Disable Copy or Paste action for text box?

Answer to the question is :

$('#email').bind("cut copy paste",function(e) {
   e.preventDefault();
});

But after I tried this I can not copy even numbers to the textbox. Is there any way I can prevent copying of alphabets and special characters only.

You'd need to add logic into the second `bind` method that checked/processed what was being pasted. At the moment the `e.preventDefault()` just blocks everything — DiskJunky, Oct 12 '17 at 09:54
you can use the built in `` and use the min and max properties to control the minimum and maximum value. — too_cool, Oct 12 '17 at 10:14

score 0 · Answer 1 · answered Oct 12 '17 at 10:08

why are you using text as your input type ????

if you are using strongly typed view ie editor for then just use data annotation

[DataType(DataType.PhoneNumber)]
public string PhoneNumber{get;set;}   //i've used string here believing you initially made it as string and hence not effecting the code elsewhere

if you are using html inputs try

input type ="tel" note some brawser does not support tel for them i would prefer number

score 0 · Answer 2 · answered Oct 12 '17 at 10:22

You can put the phone number validation code in a function and call if both places like:

function IsValidPhoneNumber(number) {
  var regex = new RegExp("^[0-9]\d*$");

   if (regex.test(number)) {
      return true;
   }
  return false;
}

and now you can call it both places like:

$(document).on("keypress","#MobilePhone", function (e) {

   if(!IsValidPhoneNumber($(this).val())) {

      e.preventDefault();
      return false;
   }
}

$('#MobilePhone').bind("cut copy paste",function(e) {

   if(!IsValidPhoneNumber($(this).val())) {

      e.preventDefault();
      return false;
   }
});

or more better would be in a single event:

$(document).on("cut copy paste keypress","#MobilePhone", function (e) {

   if(!IsValidPhoneNumber($(this).val())) {

      e.preventDefault();
      return false;
   }
}

Now it would allow copying if the value satisfies the regular expression, you might need to tweak the function to check the whole number but this should give you idea how you can allow it there.

Hope it helped!

score 0 · Accepted Answer · answered Oct 12 '17 at 10:24

Just add some checks in your binding to prevent cut / copy / paste a non-number : https://jsfiddle.net/hswtutd9/

$(function() {
  $("#email").bind("cut copy paste", function(e) {
    const data = e.originalEvent.clipboardData.getData("Text")

    if(! /\d./.test(data)) {
      e.preventDefault()
    }
  })
})

How to prevent textbox from copying letters into that?

3 Answers3