我终于弄清楚了（花了大约三天的时间）。我本可以询问 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 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 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 版本以及未来更多的浏览器在每个它认为填写错误的输入字段周围放置（红色）警报边框。
代码的其余部分应该是不言自明的。这些代码已在 IE8/9、Chrome 18 和 35 (Win/Android 4.1 Jelly Bean)、Safari 5 (Win) 和 7 (iOS) 以及 Android 自己的浏览器 (Android 4.1) 中进行了测试。
只有一处缺陷和一处限制。缺陷在于 Android 上电话号码的数字键盘与普通数字键盘有点不同，这可能会让经验丰富的 Android 用户感到惊讶。但所有必要的钥匙都在，大多数游客甚至不会注意到它。限制是访问者在每个输入字段中只能输入一个逗号或点，即分隔符。你可以事先指示他们。如果他们（仍然）输入更多内容，验证脚本会捕获这些内容。
如果愿意的话，可以测试一下现场演示。如果您仍然发现任何错误或不一致的地方，请发表评论。
