新的webkit在数字类型输入中将十进制逗号转换为~ dot，反之亦然.该浏览器特性的Javascript名称
New Webkits convert decimal comma to ~ dot and vice versa in number-type inputs. Javascript name of that browser feature?
我在最新的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没有这个功能(或者说是bug，取决于你怎么看)，IE9也没有(不知道以后的版本)。我想知道的是，是否有人知道该功能的Javascript名称。我想告诉使用这些webkit的访问者，结果可能是特殊的。
使用input type = number (converts OR conversion) comma (dot OR period OR "full stop") browser feature进行广泛的互联网搜索并没有给我所需的答案。我确实看到过一个Chrome开发者写的这篇文章，但那只是证实了(不太受欢迎的)功能，并没有提到它的JS名称。也没有这个线程，这是唯一的线程，我能找到的任何地方接近我想要找出。
我终于想通了(花了大约三天的时间)。我本可以问Chrome开发者Javascript的名字是什么，但如果我能让浏览器正常运行就更好了。这个问题主要是关于数学形式的，更广泛的目标是:
- 一致的浏览器间行为:所有浏览器和浏览器版本的行为应该相同。
- 一致的浏览器内部行为:输入字段中的小数逗号=输出字段中的小数逗号。小数点也是如此。
- web开发人员应该有强制逗号或点的选择。
- 必须纠正或捕获访问者的无意输入错误。点键和逗号键总是紧挨着的，很难看出区别，尤其是在小屏幕上。
- 在平板电脑上，获得焦点的数字输入字段应该拉起数字键盘/pad。
- 有效的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只有数字输入类型上拉数字键盘/pad。type="text" pattern="[0-9]*"不能在Android上工作。此外，input type="number"使旧的chrome(可能还有safari在Win上)删除输入的逗号，没有适当的通知。例如，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用户感到惊讶。但所有必要的钥匙都在，大多数游客甚至不会注意到它。限制是访问者只能在每个输入字段输入一个逗号或点，即分隔符。你可以事先指导他们。如果他们(仍然)输入了更多，则验证脚本会捕获它。如果您愿意，请测试现场演示。如果你仍然发现任何错误或不一致的地方，请留下评论。
相关文章：
- JQuery hide(）在show(）之后不起作用，反之亦然
- 将数组从javascript格式化为php的更好方法，反之亦然
- JavaScript-Dot navigation
- 在JavaScript中将数组转换为字符串，反之亦然
- 从 JSON 获取键值对而不使用 .(DOT） 在 Java 脚本或 jquery 中
- 复选框禁用启用反之亦然
- Cookie Domain contains Dot?
- Javascript Regex匹配两个字符串之间的子字符串，但子字符串可以包含DOT(.）
- 只获取日期的时间戳，反之亦然
- 如何使用MongoDB和Mongoose/Express将UTC时间转换为本地时间，反之亦然
- 如何从隐藏输入中填充多选输入，反之亦然
- 将 a ko.observable 更改为 ko.computed，反之亦然
- doT.js returning [object HTMLScriptElement]
- 如何从JSObject转换为Map(反之亦然）或列出JSObject成员
- 为什么当我使用JQuery DatePicker时，Google Code Prettifier停止工作(反之亦然）
- 切换 threejs 控件(从 TrackBall 切换到 FlyControls，反之亦然）
- Jquery/Javascript 解决方案，用于将 wiki 文本转换为 HTML，反之亦然
- 如何在不使用 JavaScript 正则表达式的情况下将大写转换为小写，反之亦然
- jQuery取消选中并选中子元素的反之亦然复选框
- 新的webkit在数字类型输入中将十进制逗号转换为~ dot，反之亦然.该浏览器特性的Javascript名称
