我在最新的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") browser feature并没有给我我所需的答案。我确实看过Chrome的制造商的这篇文章，但这只是证实了（不太受欢迎）功能，没有提及它的JS名称。而且也没有这个SO线程，这是唯一的SO线程我能找到的任何地方来接近我想要找出来。
我终于想通了（花了三天时间）。我本可以问过Chrome制造商Javascript名称是什么，但是如果我能使浏览器正常运行，那就更好了。该问题的主要目标主要是数学形式，其主要目标是：
这两种方法提供了：
强制十进制点
<!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"。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用户大为惊讶。但是所有必要的键都存在，大多数访问者甚至都不会注意到它。限制是，访问者只能在每个输入字段（即分隔符）中输入一个逗号或点。您可以事先指示他们。如果他们（仍然）确实输入了更多内容，验证脚本就会捕获它。
如果愿意，请测试现场演示。如果您仍然发现任何错误或不一致之处，请发表评论。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句