Auto-Format GPA while typing : REVISED I need to further simplify this solution to auto-format a text-box field intended only for the user to enter their college Grade Point Average (GPA). Here is my code:

&lt;label for="collegeGPA"&gt;GPA:&lt;/label&gt;
&lt;input type="text" name="collegeGPA" id="collegeGPA" maxlength="4" style="width:45px;" onpaste="return false;" autocomplete="off" &gt;

&lt;script type="text/javascript"&gt;

//&lt;!-- When executed this script [BELOW] auto-formats a Grade Point Average (GPA) field given the element ID [BEGIN] --&gt;

function formatGPA(gPAElementID) {

    var rE = /\D/g; // remove any characters that are not numbers
    var originalGPA = document.getElementById(gPAElementID);
    var originalGPAVal = originalGPA.value;
    var gPAVal = originalGPA.value.replace(rE,"");
    var gPAValFirstCharacter = gPAVal.charAt(0);


if  ( ( ( parseFloat(originalGPAVal) ) &gt; 4 ) &amp;&amp; ( ( parseFloat(originalGPAVal) ) &lt; 5 ) )

        {
            originalGPA.value = "4.00";
        }

else 
        {


        if  ( ( gPAVal &gt;= 0 ) &amp;&amp;  ( gPAValFirstCharacter &lt; 5 ) )
                {

                        gPALen = gPAVal.length;

                        if  ( gPALen &gt; 1 )
                                {
                                    gPAa=gPAVal.slice(0,1);
                                    gPAb=gPAVal.slice(1);
                                    originalGPA.value = gPAa + "." + gPAb; 
                                }
                    else if ( gPALen == 1 )
                                {
                                    originalGPA.value = gPAVal + ".";
                                }   
                        else
                                { 
                                    originalGPA.value = gPAVal;
                                };

                }

            else
                { 
                    originalGPA.value = "";
                };

        };

};

//&lt;!-- When executed this script [ABOVE] auto-formats a Grade Point Average (GPA) field given the element ID [END] --&gt;


document.getElementById('collegeGPA').onblur = function (e) { formatGPA(this.id); };
document.getElementById('collegeGPA').onfocus = function (e) { formatGPA(this.id); };
document.getElementById('collegeGPA').onkeypress = function (e) { formatGPA(this.id); };
document.getElementById('collegeGPA').oninput = function (e) { formatGPA(this.id);  };
document.getElementById('collegeGPA').onchange = function (e) { formatGPA(this.id); };

&lt;/script&gt;


...and here is my JSFiddle: http://jsfiddle.net/JamesAndersonJr/kxaBJ/1/ I'm looking for a simpler way to format the GPA input dynamically (i.e. as the user types it in). The format should be:

1st Character: any digit 0-4

2nd Character: Always a Period (should also be auto-inserted after user types a valid first digit)

3rd Character: any digit

4th Character: any digit
I'd maybe try something like the following. What I've done is remove the string manipulation and concentrate on rounding the numbers.

function formatGPA(originalGPA) {

    var originalGPAVal = originalGPA.value;
    var gPAVal = parseFloat(originalGPAVal);

    if (gPAVal &lt; 0) {
        gPAVal = 0;
    } else if (gPAVal &gt; 4) {
        gPAVal = 4;
    }

    if (isNaN(gPAVal)) {
        // Some kind of error handling
    } else {
        originalGPA.value = gPAVal.toFixed(2);
    }

}

//&lt;!-- When executed this script [ABOVE] auto-formats a Grade Point Average (GPA) field given the element ID [END] --&gt;

document.getElementById('collegeGPA').onblur = function () {
    formatGPA(this);
};


The only problem with this is it's difficult to manipulate it as one types. Therefore I've actioned the manipulation only on blur.