JavaScript decimal validation not functioning as intended

Question

JavaScript decimal validation not functioning as intended

Hey everyone! I've created a script that restricts textboxes to allow only decimal numbers. Take a look at the code snippet below:

function onlyDecimal(evt) {
        if (!(evt.keyCode == 46 || (evt.keyCode >= 48 && evt.keyCode <= 57)))
            return false;
        var parts = evt.srcElement.value.split('.');
        if (parts.length > 2)
            return false;
        if (evt.keyCode == 46)
            return (parts.length == 1);
        if (parts[0].length >= 15)
            return false;
        if (parts[1].length >= 3)
            return false;
    }

<asp:TextBox ID="txtDecimal" runat="server" OnKeyPress="return onlyDecimal(event)" />

As it stands, this script only allows inputs like:

1.000
12.000
123.123

However, I'm looking to enhance it to accept inputs like 1234.123,12345.123 and beyond. Can someone lend a hand?

Another issue I've encountered is that when I try to edit the decimal part after entering a number like 12.123, it doesn't allow me to edit the value until I clear the input. Any advice on how to address this?

javascript asp.net

Answer 1

Answer №1

If you want to enhance the functionality of your textbox, you can simply add the "FilterNumber" class to it and use jQuery for implementation.

<asp:TextBox ID="txtDecimal" CssClass="FilterNumber" runat="server" />

$(".FilterNumber").live("keypress", function (e) {    
    var caretPosition = doGetCaretPosition(this);
    var code = (code ? code : e.which);
    // Allow delete and navigation keys
    if (code == 0 || code == 8)
        return true;
    var Value = $(this).val();
    if (Value.indexOf('.') != -1) {
        var splt = Value.split('.');
        var indexofDot = Value.indexOf('.');
        if (caretPosition > indexofDot) {
        // Allow only three characters after .
            if (splt[1].length > 2) {
                return false;
            }
        }
        else {
            // Allow only fifteen characters before .
            if (splt[0].length > 14) {
                return false;
            }
        }
    }
    if (code != 46 && code > 31 && (code < 48 || code > 57))
        return false;
    // If it is (.)
    else if (code == 46) {
        var Value = $(this).val();
        // If value already contains (.) character
        if (Value.indexOf('.') != -1) {
            var splt = Value.split('.');
            // If there is already (.) char then return false
            if (splt.length >= 2)
                return false;
        }
    }
    return true;
});

Understanding the caret position on the textbox is crucial for determining if the user is inputting numbers before or after the dot.

function doGetCaretPosition(oField) {
    // Initialize
    var iCaretPos = 0;
    // For IE Support
    if (document.selection) {
        // Set focus on the element
        oField.focus();
        // To get cursor position, get empty selection range
        var oSel = document.selection.createRange();
        // Move selection start to 0 position
        oSel.moveStart('character', -oField.value.length);
        // The caret position is selection length
        iCaretPos = oSel.text.length;
    }
    // For Firefox support
    else if (oField.selectionStart || oField.selectionStart == '0')
        iCaretPos = oField.selectionStart;
    // Return results
    return (iCaretPos);
}

Answer 2

If you want to enhance the functionality of your textbox, you can simply add the "FilterNumber" class to it and use jQuery for implementation.

<asp:TextBox ID="txtDecimal" CssClass="FilterNumber" runat="server" />

$(".FilterNumber").live("keypress", function (e) {    
    var caretPosition = doGetCaretPosition(this);
    var code = (code ? code : e.which);
    // Allow delete and navigation keys
    if (code == 0 || code == 8)
        return true;
    var Value = $(this).val();
    if (Value.indexOf('.') != -1) {
        var splt = Value.split('.');
        var indexofDot = Value.indexOf('.');
        if (caretPosition > indexofDot) {
        // Allow only three characters after .
            if (splt[1].length > 2) {
                return false;
            }
        }
        else {
            // Allow only fifteen characters before .
            if (splt[0].length > 14) {
                return false;
            }
        }
    }
    if (code != 46 && code > 31 && (code < 48 || code > 57))
        return false;
    // If it is (.)
    else if (code == 46) {
        var Value = $(this).val();
        // If value already contains (.) character
        if (Value.indexOf('.') != -1) {
            var splt = Value.split('.');
            // If there is already (.) char then return false
            if (splt.length >= 2)
                return false;
        }
    }
    return true;
});

Understanding the caret position on the textbox is crucial for determining if the user is inputting numbers before or after the dot.

function doGetCaretPosition(oField) {
    // Initialize
    var iCaretPos = 0;
    // For IE Support
    if (document.selection) {
        // Set focus on the element
        oField.focus();
        // To get cursor position, get empty selection range
        var oSel = document.selection.createRange();
        // Move selection start to 0 position
        oSel.moveStart('character', -oField.value.length);
        // The caret position is selection length
        iCaretPos = oSel.text.length;
    }
    // For Firefox support
    else if (oField.selectionStart || oField.selectionStart == '0')
        iCaretPos = oField.selectionStart;
    // Return results
    return (iCaretPos);
}

JavaScript decimal validation not functioning as intended

Answer №1

Similar questions

Unable to open new window on iOS devices using $window.open

Selecting the next element in the DOM using Javascript

What sets apart toBeInTheDocument from getBy* in @testing-library/react?

Guide on filling accordion with data from Firebase

React dynamic dropdown selection based on previous dropdown values

Receiving an error when attempting to utilize a value from the .env file in createSecretKey function

Enhance your viewing experience with the Zoom feature that activates when

Ways to personalize Angular's toaster notifications

I'm having trouble inserting text into a three.js scene

Reading JavaScript files using the HTML 5 File Reader

Exploring the properties and methods of a node.js module object through iteration

Is it possible to include a component in an HTML file when the constructor of the component needs a parameter?

Space between flex content and border increases on hover and focus effects

What causes fs to produce an error when routing to a new page, yet refreshing the page resolves the issue?

What is the process for saving information to a database with JavaScript?

Display jqgrid with borders and insert extra headers text at the top of the grid

Issue with Refresh Triggering Update, localStorage, useState, useEffect Combination

Looking for a way to connect a background image in Vue CLI?

Using AJAX asynchronously in JavaScript commands synchronization

Sliding off the canvas - concealed navigation