问题：

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

壤驷德寿

2023-03-14

我在最新的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?editors=100.正如所暗示的，您可能需要一个为使用这种符号的国家制作的版本：4.999,99欧元。输入100以下的任意两个数字：a）每个数字有一个小数点，b）小数点逗号、小数点或其组合。并且对显示的结果感到惊讶-无论输入使用点还是逗号，计算输出总是相同的，并且输出总是以逗号显示。

Firefox30没有这个功能（或者bug，取决于你怎么看），IE9也没有（不知道更高版本）。我想知道的是，是否有人知道该功能的Javascript名称。我想告诉拥有这些网络工具包的访问者，结果可能会很特别。

使用输入类型=数字（转换或转换）逗号（点或句点或“句号”）浏览器功能进行广泛的互联网搜索并没有给出我需要的答案。我确实看到了一家Chrome制造商的这篇文章，但这只证实了（不太受欢迎的）功能，没有提到它的JS名称。这条索线也没有，这是我能找到的唯一一条索线，接近我想要找到的东西。

鲁俊友

2023-03-14

我终于弄明白了（花了大约三天的时间）。我本可以问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?editors=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?editors=100.

.
一些解释：

input type=“tel”：在iOS和Android上，只有数字输入类型才能打开数字键盘/键盘type=“text”pattern=“[0-9]*”在Android上不起作用。另外，input type=“number”会在没有适当通知的情况下，让较旧的Chrome（可能还有Win上的Safaris）删除输入的逗号。4,5无声地变成了45。因此输入type=“tel”

代码的其余部分应该是不言自明的。这些代码已经在IE8/9、Chrome18和35（Win/Android4.1果冻豆）、Safari5（Win）和7（iOS）以及Android自己的浏览器（Android4.1）中进行了测试。

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

如果你愿意，测试现场演示。如果您仍然发现任何错误或不一致的地方，请留下评论。

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

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档