Javascript allow only numeric paste

Question

Javascript/jQuery:

 $(document).ready(function () {
     $(\'#txt\').bind(\"paste\", function (e) {
         var $this = $(this);
         $         


        

Answer 1

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.

Answer 2

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, ''));
    }

Answer 3

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
});