我在最新的 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) 小数点逗号、小数点或它们的组合。并对显示的结果感到惊讶——无论输入是使用点还是逗号，计算输出始终相同，并且输出始终以逗号显示。
Firefox 30 没有该功能(或错误，取决于您如何看待它)，IE9 也没有(不知道以后的版本)。我想知道是否有人知道该功能的 Javascript 名称。我想告知使用此类 Webkit 的访问者，结果可能很奇怪。
使用 input type = number (converts OR conversion) comma (dot OR period OR "full stop") 浏览器功能进行广泛的互联网搜索没有给我需要的答案。我确实遇到了this article by a maker of Chrome ，但这只确认了(不太受欢迎的)功能，没有提到它的 JS 名称。 this SO thread 也没有，这是我能找到的唯一一个接近我试图找出的东西的 SO 线程。
最佳答案
我终于弄明白了(在花了大约三天时间之后)。我本可以问 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 上的 Safari)删除输入的逗号，恕不另行通知。例如。 4,5 悄无声息地变成了 45。因此input type="tel"。- Javascript 验证:优于 HTML5 验证，因为后者不受旧版浏览器支持，并且其警告文本气球无法更改。
- CSS:
input[type="tel"]:invalid {box-shadow: none;}:这会阻止新的 Firefox 版本，以及 future 可能更多的浏览器，将(红色) 警告它认为填写不正确的每个输入字段周围的边框。
其余代码应该是不言自明的。代码已在IE8/9、Chrome 18和35(Win/Android 4.1 Jelly Bean)、Safari 5(Win)和7(iOS)、Android自带浏览器(Android 4.1)中测试。
只有一个不完美和一个限制。不完美之处在于 Android 上电话号码的数字键盘与普通数字键盘有点不同，可能会引起一些有经验的 Android 用户的注意。但所有必要的 key 都存在，大多数游客甚至不会注意到它。限制是访问者在每个输入字段中只能输入一个逗号或点，即分隔符。你可以事先指导他们。如果他们(仍然)确实输入了更多内容，它就会被验证脚本捕获。
如果愿意，请测试现场演示。如果您仍然发现任何错误或不一致的地方，请发表评论。
关于javascript - 新的 Webkit 在数字类型输入中将十进制逗号转换为 ~ 点，反之亦然。该浏览器功能的 Javascript 名称？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24407109/