Restricting text field to one decimal point entry (Code works in Safari, but not Firefox)

StackOverflow https://stackoverflow.com/questions/17276076

Question

I have the following javascript code adapted to help restrict text entry to a single decimal point, as uploaded to my testing server at cogwheelmedia.net/Survey/numerickey.php

Whilst it works in Safari, it does not seem to work in Firefox. What alterations do I need to make to get it to work in all browsers?

<body>
<p>
   <script type="text/javascript">
function OnTextNumericKeyPress(evt) {
         var theEvent = evt || window.event;
         var rv = true;
var key = (typeof theEvent.which === 'undefined') ? theEvent.keyCode : theEvent.which;
         if (key && (key !== 8)) {
             var keychar = String.fromCharCode(key);
             var keycheck = /[.0-9]/;
             if (!keycheck.test(keychar) || (keychar == '.' && evt.srcElement.value.indexOf('.') > -1)) {     
        rv = theEvent.returnValue = false; //for IE
           if (theEvent.preventDefault) theEvent.preventDefault(); //Firefox 
 } else {
 var number = evt.srcElement.value.split('.');
 if (number.length == 2 && number[1].length > 1) {
     rv = theEvent.returnValue = false; //for IE
     if (theEvent.preventDefault) theEvent.preventDefault(); //Firefox
     }
 }
         return rv;
     }


function ValidateDecimal(o) {
    if (o.value.length > 0) {
         var objReg = /^\d+(\.\d{1,2})?$/;
         if (objReg.test(o.value))                               
             o.style.backgroundColor='';
         else
         o.style.backgroundColor='red';
         return false;
     } 
}
}
</script>
  <input name="txtPrice" ID="txtPrice" type="text" runat="server" MaxLength="8" onfocusout="return OnTextNumericKeyPress(event);" onBlur="return OnTextNumericKeyPress(event);" onKeyPress="return OnTextNumericKeyPress(event);" onkeyup="ValidateDecimal(this);"/> 
</p>
</body>
</html>
Was it helpful?

Solution

Simply organize the code. For first I suggest you to use brackets because they are free and for second: use indentation, it is also free. Another tips is to declare only once the variables that doesn't need to be redefined during the execution, else you will lose all the space that you gained by avoiding the brackets and the indentation.

As it's easy to see from a debugger, the function validateDecimal was undefined, this because it was inside OnTextNumericKeyPress: you cannot use what you can't see.

here the code, hope now it works as expected:

<script type="text/javascript">
var objReg = /^\d+(\.\d{1,2})?$/;
var keycheck = /[.0-9]/;
var rv = true;

function OnTextNumericKeyPress(evt) {
    var theEvent = evt || window.event;
    var key = (typeof theEvent.which === 'undefined') ? theEvent.keyCode : theEvent.which;
    if (key && (key !== 8)) {
         var keychar = String.fromCharCode(key);
         if (!keycheck.test(keychar) || 
            (keychar == '.' && evt.srcElement.value.indexOf('.') > -1)) {     
                rv = theEvent.returnValue = false; //for IE
                if (theEvent.preventDefault) theEvent.preventDefault(); //Firefox 
        }else{
            var number = evt.srcElement.value.split('.');
            if (number.length == 2 && number[1].length > 1) {
                rv = theEvent.returnValue = false; //for IE
                if (theEvent.preventDefault) theEvent.preventDefault(); //Firefox
            }
        }
    return rv;
    }
}
function ValidateDecimal(o) {
    if (o.value.length > 0) {
         if (objReg.test(o.value)){                               
             o.style.backgroundColor='';
         }else{
             o.style.backgroundColor='red';
         }
         return false;
     } 
}
</script>
<p>
  <input name="txtPrice" ID="txtPrice" type="text" runat="server" MaxLength="8"
   onfocusout="return OnTextNumericKeyPress(event);" 
   onBlur="return OnTextNumericKeyPress(event);" 
   onKeyPress="return OnTextNumericKeyPress(event);" 
   onkeyup="ValidateDecimal(this);"/> 
</p>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top