New Webkits convert decimal comma to ~ dot and vic

2019-01-09 14:11发布

站内问答 / JavaScript
1279 1 5

I found a most peculiar browser feature in the latest Chrome (35; Win/Android/iOS) and Safari (7; iOS) versions. If you have a math form with input type="number" and enter a number with a decimal comma, the browsers do the calculations with the number as if the comma were a dot. And if you enter numbers with decimal dots, they do their normal calculations, but the resulting figure is displayed with a decimal comma. That is, in my European (i.e. Dutch) version. I don't know about American versions.

If you would find that hard to believe, I made a demo to demonstrate it: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo Browser Behavior w/ Number Inputs</title>
    <style>
    input {
        box-sizing: border-box;
        margin-top: 10px;
        width: 100px;
    }
    </style>
</head>
<body>
    <form name="theForm">
        <input type="number" name="A1field" min="0" max="100" step="0.1"> Input field
                <br>
        <input type="number" name="A2field" min="0" max="100" step="0.1"> Input field
                <br>
        <input type="button" value="Calculate" onclick="calculateAndPopulate()">
                <br>
        <input type="number" name="R1field" min="0" max="10000" step="0.01"> Result field
                <br>
        <input type="reset" value="Reset">
    </form>
    <script>
        function calculateAndPopulate() {
            var A1val = theForm.A1field.value;
            var A2val = theForm.A2field.value;
            var R1 = (A1val*A2val);
            theForm.R1field.value = R1;
        }
    </script>
</body>
</html>

Live demo here: http://codepen.io/anon/pen/xDvCB?editors=100. As implied, you would probably need a version that was made for countries with this kind of notation: € 4.999,99. Enter any two numbers under 100 with: a) one decimal each, and b) decimal commas, decimal dots, or a combination thereof. And be surprised at the displayed result - it doesn't matter whether dot or comma is used for the input, the calculation output is always the same and the output is always displayed with a comma.

Firefox 30 does not have that feature (or bug, depending on how you look at it), and neither does IE9 (don't know about later versions). What I would like to know is whether anyone knows the Javascript name of that feature. I would like to inform the visitors with such Webkits that results can be peculiar.

An extensive internet search using input type = number (converts OR conversion) comma (dot OR period OR "full stop") browser feature did not give me the answer I need. I did come across this article by a maker of Chrome, but that only confirms the (not too well received) feature, does not mention the JS name of it. And neither does this SO thread, which is the only SO thread I could find that comes anywhere near to what I'm trying to find out.

1条回答
何必那么认真
2楼-- · 2019-01-09 14:50

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)