Javascript allow only numeric paste

Javascript/jQuery:

 $(document).ready(function () {
     $('#txt').bind("paste", function (e) {
         var $this = $(this);
         $this.val($this.val().replace(/[^d.]/g, ''));
     });
 });

Html:

<asp:TextBox ID="txt" runat="server"></asp:TextBox>

If value as below

10-10-20.0a

Result must be as below

1010200

I only want to allow it to paste numeric values to the textbox, otherwise, disable it. However, if I try the above javascript code, it is not working.

Where did I miss on the javascript side?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Call the function onchange event of Textbox as, instead of document.ready:

HTML

<asp:TextBox ID="txt" runat="server" onchange="onlyNum()"></asp:TextBox>

JQuery

    function onlyNum() {
      var $this = $('#txt');
      $this.val($this.val().replace(/D/g, ''));
    }

Method 2

You need to make sure that you have your Client ID Mode set correctly, or the emitted text box will probably not have an ID of “txt”.

https://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode%28v=vs.110%29.aspx

<asp:TextBox ID="txt" runat="server" ClientIDMode="Static" ></asp:TextBox>

Another approach is to use CSS classes which can be very useful for re-use.

<asp:TextBox ID="txt" runat="server" CssClass="numbers-only" ></asp:TextBox>

And your jQuery selector would be:

$("input.numbers-only").on("paste", function(){  
    // do your stuff here
});

Method 3

The jquery event should be:

$('#.txt').on('paste', function() {...});

See example here: Catch paste input

Note the use of a timeout to allow the value to be pasted before you manipulate it.

Once you properly handle the event and get the pasted value, you can add your validation.

Also see ste-fu’s answer about referencing the proper field, as asp.net will by default append the container’s is to your text box id and the selector ‘#txt’ won’t work.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0