新的Webkits在数字类型输入中将十进制逗号转换为〜dot，反之亦然。该浏览器功能的Javascript名称？

Question

我在最新的Chrome（35; Win / Android / iOS）和Safari（7; iOS）版本中找到了一个最奇特的浏览器功能。 如果您有一个input type="number"的数学表格并输入一个带小数点后逗号的数字，浏览器会使用数字进行计算，就像逗号是一个点一样。 如果输入带小数点的数字，它们会进行正常计算，但结果数字会显示小数点后的逗号。 也就是说，在我的欧洲（即荷兰语）版本中。 我不知道美国版本。

如果您觉得难以置信，我做了一个演示来演示它：

<!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>

现场演示： http ： //codepen.io/anon/pen/xDvCB？edit = 100 。 正如暗示的那样，您可能需要为具有此类表示法的国家/地区制作的版本：€4.999,99。 输入100以下的任意两个数字：a）每个小数一位，和b）十进制逗号，小数点或其组合。 并且对显示的结果感到惊讶 - 无论点或逗号是否用于输入，计算输出始终相同，输出始终以逗号显示。

Firefox 30没有该功能（或bug，取决于你如何看待它），IE9也没有（不知道更高版本）。 我想知道的是，是否有人知道该功能的Javascript名称。 我想通过这样的Webkits告知访问者，结果可能是特殊的。

使用input type = number (converts OR conversion) comma (dot OR period OR "full stop") browser feature的广泛互联网搜索没有给我我需要的答案。 我确实遇到过Chrome制造商的这篇文章，但这只是确认了（不太受欢迎）的功能，没有提到它的JS名称。 而且这个SO线程也没有，这是我能找到的唯一SO线程，它接近我想要找到的东西。

Answer 1

我终于明白了（在花了三天之后）。 我本可以向Chrome制造商询问Javascript名称是什么，但如果我能让浏览器正常运行会更好。 这个问题的主要关于数学形式的更广泛的目标是：

一致的浏览器行为：所有浏览器和浏览器版本应该表现相同。
一致的内部浏览器行为：输入字段中的十进制逗号=输出字段中的十进制逗号。 小数点的计数相同。
Web开发人员应该可以选择强制使用逗号或点。
必须纠正或捕获访问者的无意输入错误。 点和逗号键总是彼此相邻，差异很难看，特别是在小屏幕上。
在平板电脑上，获得焦点的数字输入字段应该拉起数字键盘/键盘。
有效的HTML。

这两种方法提供：

强制的十二进制点

<!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>

现场演示： http ： //codepen.io/anon/pen/bhajB？edit = 100 。

强迫的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>

现场演示： http ： //codepen.io/anon/pen/jqFeJ？edit = 100 。

。
一些解释：

input type="tel" ：只有数字输入类型可以拉动iOS和Android上的数字键盘/键盘。 type="text" pattern="[0-9]*"在Android上不起作用。 此外， input type="number"使较旧的Chromes（可能是Win中的Safaris）删除输入的逗号，没有适当的通知。 例如4,5默默地变成45.因此input type="tel" 。
Javascript验证：这比HTML5验证更好，因为旧版浏览器不支持后者，并且无法更改其警告文本框。
CSS： input[type="tel"]:invalid {box-shadow: none;} ：阻止新的Firefox版本，以及将来可能更多的浏览器，在它认为填充的每个输入字段周围放置一个（红色）警报边框不正确。

其余的代码应该是不言自明的。 这些代码已在IE8 / 9，Chrome 18和35（Win / Android 4.1 Jelly Bean），Safari 5（Win）和7（iOS）以及Android自己的浏览器（Android 4.1）中进行了测试。

只有一个不完美和一个限制。 不完美之处在于Android上的电话号码数字键盘与普通的数字键盘略有不同，并且可能会让有经验的Android用户产生一些惊喜。 但是所有必要的密钥都存在，大多数访问者甚至都不会注意到它。 限制是访问者每个输入字段只能输入一个逗号或点，即分隔符。 你可以事先指导他们。 如果他们（仍然）输入更多，它将被验证脚本捕获。

如果愿意，可以测试现场演示。 如果您仍然发现任何错误或不一致，请发表评论。

新的Webkits在数字类型输入中将十进制逗号转换为〜dot，反之亦然。该浏览器功能的Javascript名称？

问题描述

1 个解决方案

解决方案1
3 已采纳 2014-06-26 06:34:15

新的Webkits在数字类型输入中将十进制逗号转换为〜dot，反之亦然。 该浏览器功能的Javascript名称？

问题描述

1 个解决方案

解决方案1 3 已采纳 2014-06-26 06:34:15

新的Webkits在数字类型输入中将十进制逗号转换为〜dot，反之亦然。该浏览器功能的Javascript名称？

解决方案1
3 已采纳 2014-06-26 06:34:15