New Webkits convert decimal comma to ~ dot and vice versa in number-type inputs. Javascript name of that browser feature?

I finally figured it out (after having spent some three days on it). I could have asked the Chrome maker what the Javascript name is, but it would be much better if I could make the browsers behave properly. The broader objective of this question, which is primarily about math forms, is:

Consistent interbrowser behavior: all browsers and browser versions should behave the same.
Consistent intrabrowser behavior: decimal comma in input fields = decimal comma in output field. The same counts for decimal dots.
The web developer should have the choice of forcing comma or dot.
Inadvertent input errors by the visitor must be corrected or caught. The dot and comma keys are always next to each other, and the difference can be hard to see, especially on small screens.
On tablets, a numerical input field that gets focus should pull up the numerical keyboard/pad.
Valid HTML.

These two methods offer that:

FORCED DECIMAL DOT

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Math form with forced dot separator</title>
    <style>
    input {
        box-sizing: border-box;
        margin-top: 10px;
        width: 100px;
    }
    input[type="tel"]:invalid {
        box-shadow: none; /* 0 doesn't work */
    }
    </style>
</head>
<body>
    <h3>Math form with forced dot separator</h3>
    <form name="theForm">
        <input type="tel" name="A1field"> Input field
                <br>
        <input type="tel" name="A2field"> Input field
                <br>
        <input type="button" value="Multiply" onclick="multiplyAndPopulate()">
                <br>
        <input type="tel" name="R1field"> Result field
                <br>
        <input type="reset" value="Reset">
    </form>
    <script>
        var telInputs = document.querySelectorAll('input[type="tel"]');
        for (var i=0; i<telInputs.length; i++) {
            telInputs[i].onblur = function() {
                this.value = this.value.replace(',','.');
            }
        }

        function multiplyAndPopulate() {
            var A1 = theForm.A1field.value;
            var A2 = theForm.A2field.value;
            var R1 = (A1*A2);
            if (isNaN(R1) == true) {
                alert('In one or more input fields you have used more than the allowed one comma or dot, or entered a non-numerical character.');
                return false;
            }
            else {
                theForm.R1field.value = R1;
            }
        }
    </script>
</body>
</html>

Live demo here: http://codepen.io/anon/pen/bhajB?editors=100.

FORCED DECIMAL COMMA

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Math form with forced comma separator</title>
    <style>
    input {
        box-sizing: border-box;
        margin-top: 10px;
        width: 100px;
    }
    input[type="tel"]:invalid {
        box-shadow: none; /* 0 doesn't work */
    }
    </style>
</head>
<body>
    <h3>Math form with forced comma separator</h3>
    <form name="theForm">
        <input type="tel" name="A1field"> Input field
            <br>
        <input type="tel" name="A2field"> Input field
            <br>
        <input type="button" value="Multiply" onclick="multiplyAndPopulate()">
            <br>
        <input type="tel" name="R1field"> Result field
            <br>
        <input type="reset" value="Reset">
    </form>
    <script>
        var telInputs = document.querySelectorAll('input[type="tel"]');
        for (var i=0; i<telInputs.length; i++) {
            telInputs[i].onblur = function() {
                this.value = this.value.replace('.',',');
            }
        }

        function multiplyAndPopulate() {
            var A1 = theForm.A1field.value.replace(',','.'); // not visible
            var A2 = theForm.A2field.value.replace(',','.'); // not visible
            var R1 = (A1*A2);
            if (isNaN(R1) == true) {
                alert('In one or more input fields you have used more than the allowed one comma or dot, or entered a non-numerical character.');
                return false;
            }
            else {
                theForm.R1field.value = R1;
                theForm.R1field.value = theForm.R1field.value.replace('.',',');
            }
        }
    </script>
</body>
</html>

Live demo here: http://codepen.io/anon/pen/jqFeJ?editors=100.

.
A few explanations:

input type="tel": only numerical input types pull up the numerical keyboard/pad on iOS and Android. type="text" pattern="[0-9]*" does not work on Android. Also, input type="number" makes older Chromes (and possibly Safaris on Win) delete entered commas, without proper notice. E.g. 4,5 is silently turned into 45. Hence the input type="tel".
Javascript validation: that is better than HTML5 validation, because the latter is not supported by older browsers, and its warning text balloons cannot be changed.
CSS: input[type="tel"]:invalid {box-shadow: none;}: that stops new Firefox versions, and possibly more browsers in the future, from putting a (red) alerting border around every input field it deems filled in incorrectly.

The rest of the code should be self-explanatory. The codes have been tested in IE8/9, Chrome 18 and 35 (Win/Android 4.1 Jelly Bean), Safari 5 (Win) and 7 (iOS), and Android’s own browser (Android 4.1).

There is just one imperfection and one limitation. The imperfection is that the numerical keypad for telephone numbers on Android is a bit different from the normal numerical keyboard, and may raise some eyebrows in experienced Android users. But all necessary keys are present, and most visitors won’t even notice it. The limitation is that visitors can enter only one comma or dot per input field, i.e. the separator. You could instruct them beforehand. And if they (still) do enter more, it is caught by the validation script.

Test the live demos if you will. If you would still find anything wrong or inconsistent, please leave a comment.

More Related Contents:

Leave a Comment Cancel reply