How to mask a decimal input using Jquery?

Question

I have previously used Telerik's RadNumericTextBox for giving input of decimals like below:

<telerik:RadNumericTextBox ID="txtNewAmt" runat="server" EnableViewState="false"
           Width="100px" CssClass="input" Type="Number" EnabledStyle-HorizontalAlign="Right"
           PlacesBeforeDecimal="11" NumberFormat-DecimalDigits="2">
      <ClientEvents OnKeyPress="validateRegExMaskNumeric" />
</telerik:RadNumericTextBox>

Here, in the input,

Only numbers are allowed.
Numbers will be aligned from right.
Places before decimal can be 11 or less and after decimal can be 2 or less.

But, i don't want to use Telerik anymore.

How to mask the same thing using Jquery? Can it be handled using asp:Textbox?

Setu Kumar Basak · Accepted Answer · 2018-07-14T13:34:38.553

0

I have to choose between jQuery Mask Plugin and MaskInput Plugin. jQuery Mask Plguin is bulkier than MaskInput as it contains more features. But, for my need, i chose MaskInput Plugin.

You can find some examples here and my experience here.

edited Jul 14 '18 at 13:34

answered Jul 04 '18 at 04:07

Setu Kumar Basak

11,460
9
53
85

score -1 · Answer 2 · answered Jun 25 '18 at 14:10

try with this code below

Textbox: <input id="txtQty" type="text" />

Jquery

$(function () {
$("input[id*='txtQty']").keydown(function (event) {


    if (event.shiftKey == true) {
        event.preventDefault();
    }

    if ((event.keyCode >= 48 && event.keyCode <= 57) || 
        (event.keyCode >= 96 && event.keyCode <= 105) || 
        event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 ||
        event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190) {

    } else {
        event.preventDefault();
    }

    if($(this).val().indexOf('.') !== -1 && event.keyCode == 190)
        event.preventDefault(); 
    //if a decimal has been added, disable the "."-button

});

});

How to mask a decimal input using Jquery?

2 Answers2