新网站在数字类型输入中将十进制逗号转换为 ~ 点，反之亦然。该浏览器功能的 Javascript 名称？
Posted
技术标签:
【中文标题】新网站在数字类型输入中将十进制逗号转换为 ~ 点，反之亦然。该浏览器功能的 Javascript 名称？【英文标题】：New Webkits convert decimal comma to ~ dot and vice versa in number-type inputs. Javascript name of that browser feature? 【发布时间】：2014-06-25 11:12:46 【问题描述】：我在最新的 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 进行的广泛互联网搜索没有给我所需的答案。我确实遇到了this article by a maker of Chrome，但这只是确认了（不太受欢迎）功能，没有提到它的 JS 名称。 this SO thread 也没有，这是我能找到的唯一一个与我试图找出的内容接近的 SO 线程。
【问题讨论】：
仅供参考，我使用的是英国语言环境（点表示小数位），Win 上的 Chrome 将任何带逗号的值视为无效。所以这似乎只能以一种方式工作，因此我认为这是 Chrome 中的一个错误。我没有答案，但这里有一些相关的问题：Chrome auto formats input number, How to handle floats and decimal separators with html5 input type number @jfrej - 我的 Chrome 18 作为预览选项之一嵌入到我的代码编辑器中也是如此。但是在第 18 和 35 节之间的任何地方，这种行为都发生了变化。 Chrome 制造商的链接文章（即与用户的讨论）明确指出这不是错误，而是一项功能。关于您链接到的 SO 线程：我在各种配置中广泛尝试了该模式方法，但它无法治愈特殊的输出 - 始终使用逗号作为小数分隔符。不过，我会再看一遍，如果我成功了，我会告诉你的。 @jfrej - 另外：将输入类型设置为text 并结合正则表达式模式确实可以解决数学/显示行为，但使用text，平板电脑会尽快拉起它们的普通键盘因为该模式包括一个点或一个逗号。我有一个表格，其中最多必须输入 11 个数字，对于平板电脑用户来说，每次都必须将键盘切换为数字实在是太烦人了。
@jfrej：我终于想通了。请参阅我的（自己的）答案。
【参考方案1】：
我终于弄明白了（在花了三天时间之后）。我本可以询问 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 版本，以及未来可能更多的浏览器，在它认为错误填写的每个输入字段周围放置（红色）警告边框。
其余的代码应该是不言自明的。这些代码已经在 IE8/9、Chrome 18 和 35（Win/Android 4.1 Jelly Bean）、Safari 5（Win）和 7（iOS）以及 Android 自己的浏览器（Android 4.1）中进行了测试。
只有一个缺陷和一个限制。不完美之处在于Android上的电话号码数字键盘与普通的数字键盘有点不同，可能会让有经验的Android用户有些惊讶。但是所有必要的密钥都存在，大多数访客甚至都不会注意到它。限制是访问者每个输入字段只能输入一个逗号或点，即分隔符。你可以事先指导他们。如果他们（仍然）输入更多，它会被验证脚本捕获。
如果愿意，请测试现场演示。如果您仍然发现任何错误或不一致的地方，请发表评论。
【讨论】：
您的解决方案在 iPhone 上不起作用（使用 iOS7 或 iOS8 测试），因为在 iPhone 上会显示 0-9 虚拟键盘，它没有正常的移位键盘（而是有带有[+*#] 键且没有[.] 或[,] 键可用的0-9 键盘）。
我可以不用大喊大叫（高音），但感谢您的反馈。我没有在 iPhone 上测试它。我在 iPad 上进行了测试，因为我的 Android 平板电脑和手机之间的键盘没有区别，所以我认为 iPhone 和 iPad 之间也没有区别。但显然有。在 iPhone 上，您不能从电话号码键盘转到另一个键盘吗？以上是关于新网站在数字类型输入中将十进制逗号转换为 ~ 点，反之亦然。该浏览器功能的 Javascript 名称？的主要内容，如果未能解决你的问题，请参考以下文章
如何在JavaScript中将数字的二进制表示从字符串转换为整数？