新的 Webkit 在数字类型输入中将十进制逗号转换为 ~ 点，反之亦然.该浏览器功能的 Javascript 名称?

本文介绍了新的 Webkit 在数字类型输入中将十进制逗号转换为 ~ 点，反之亦然.该浏览器功能的 Javascript 名称?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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>

现场演示:http://codepen.io/anon/pen/xDvCB?editors=100.正如暗示的那样，您可能需要一个为具有这种符号的国家/地区制作的版本:4.999,99 欧元.输入 100 以内的任意两个数字:a) 每个小数点，b) 小数点逗号、小数点或它们的组合.并且对显示的结果感到惊讶 - 输入使用点还是逗号并不重要，计算输出始终相同，并且输出始终以逗号显示.

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 没有那个功能(或错误，取决于你怎么看)，IE9 也没有(不知道以后的版本).我想知道的是是否有人知道该功能的 Javascript 名称.我想通知具有此类 Webkit 的访问者，结果可能很奇怪.

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.

使用输入类型=数字(转换或转换)逗号(点或句点或句号")浏览器功能的广泛互联网搜索没有给我我需要的答案.我确实看到了 Chrome 制造商的这篇文章，但这只是确认了(不太受欢迎)功能，并没有提到它的 JS 名称.这个SO线程，这是我能找到的唯一一个接近我想要找到的东西的线程.

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.

推荐答案

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

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:

一致的浏览器间行为:所有浏览器和浏览器版本的行为应该相同.
一致的浏览器内行为:输入字段中的十进制逗号 = 输出字段中的十进制逗号.小数点的计数相同.
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?编辑=100.

强制十进制逗号

<!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?编辑=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 版本，以及未来可能更多的浏览器，从) 在它认为填写不正确的每个输入字段周围发出警报边框.

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.

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

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).

只有一个缺陷和一个限制.不足之处在于Android上的电话号码数字键盘与普通数字键盘略有不同，可能会引起有经验的Android用户的一些注意.但是所有必要的钥匙都存在，大多数游客甚至不会注意到它.限制是访问者只能在每个输入字段中输入一个逗号或点，即分隔符.你可以提前告诉他们.如果他们(仍然)确实输入了更多内容，则会被验证脚本捕获.

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.

这篇关于新的 Webkit 在数字类型输入中将十进制逗号转换为 ~ 点，反之亦然.该浏览器功能的 Javascript 名称?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！