一个<输入类型=“number”>
元素将在现代移动操作系统上打开一个数字软件键盘。不是每个用户都可以将十进制数字输入数字输入字段而没有正确的本地化。超过一半的世界使用逗号,另一半使用一个时期作为其小数标记。(在拉丁文脚本中。)您的Web应用程序是否考虑到这一点?并做Web浏览器?
基于触摸的软件键盘或“软键盘”,可以适应用户请求的输入类型。如果请求电子邮件地址登录,则可以使软键盘包含在标志处。
对于数字输入,键盘可以包括拨号垫,十进制标记和减号上的较大数字。这些自适应软键盘对用户无需手动更改其已经难以使用的键盘的视图,这是一个很大的便利性。
这些软键盘的问题 - 即使使用常规模拟键盘 - 是十进制马克。大致世界一半使用逗号作为他们的小数标记,另一个(主要是英国帝国的前殖民地)使用了一段时间。[1]在计算中,小数标记通常按照系统的区域设置之后的方式呈现。yabo亚博体育下载但是,存储器中的存储值始终用一段时间表示。
将无效值输入到a中<输入类型=“number”>
将根据规范,将值设置为空字符串。向用户提供的值仍将是它们键入的任何类型,但表单不会提交任何数据。这是一个很大的可用性以及Web应用程序的功能问题。
W3C建议说是什么?
一个值的价值<输入类型=“number”>
必须始终是有效的整数(数字)或有效的十进制数。该规范如何定义小数分子分隔符,因为无论区域设置如何。[2]但是,用户输入的值或显示给用户的值不需要满足此技术要求。规范没有定义应该如何处理究竟是如何处理,但建议以下内容:yabo亚博体育下载
“鼓励浏览器使用根据输入元素的语言或用户首选语言环境所暗示的语言环境的约定的用户界面。使用页面的语言环境将确保与页面提供的数据一致。“[3]
此外,除Internet Explorer之外的所有浏览器都将剥离任何空格字符和千间隔子(空间,逗号,或根据区域设置的时段 - 见下文)来自价值。
yabo亚博体育下载在此逻辑之后,我们可以进行测试[4]并获取以下Web浏览器支yabo亚博体育下载持比较图表:
浏览器支持
UI.语言指用户设置的浏览器或操作系统的用户界面语言。元素语言是指表单窗口小部件的语言(<输入类型=“数字”lang =“
)按页面作者设置。在桌面中,欧洲英语代表逗号,英语代表期间地区。
公认的小数标记 | ||||
---|---|---|---|---|
英语UI和元素 | 英语UI和欧洲英语元素 | 欧洲英语UI和元素 | 欧洲英语UI和英语元素 | |
桌面 | ||||
Mozilla Firefox 49. | 期 | 期间和逗号 | 期间和逗号 | 期 |
谷歌Chrome 45(MacOS) | 期间和逗号 | 期间和逗号 | 期间和逗号 | 期 |
Google Chrome 45(Linux / Windows) | 期 | 期 | 期 | 期 |
歌剧41. | 期 | 期 | 期间和逗号 | 期 |
Safari 10(麦斯科斯) | 期间和逗号 | |||
Microsoft Edge 15. | 期 | 期 | 期 | 期 |
Internet Explorer 11. | 不支持 | |||
Windows Phone 8和8.1 | ||||
Internet Explorer Mobile 10和11 | 不支持 | |||
ios 8. | ||||
Safari Mobile | 期间和逗号 | |||
谷歌浏览器 | ||||
歌剧海岸 | ||||
WebView. | ||||
Android 4.4和5,6,7 | ||||
火狐浏览器 | 期 | 期 | 期 | 期 |
谷歌浏览器 | 期 | 期 | 期间和逗号 | 期间和逗号 |
歌剧手机 | 期 | 期 | 期间和逗号 | 期间和逗号 |
WebView. | 期 | 期 | 期间和逗号 | 期间和逗号 |
看到互联网档案中上表的历史数据,包括旧浏览器版本及其行为。
我没有调查对阿拉伯语或其他非拉丁脚本的十进制标记的支持。我希望结果类似或更糟糕。
关于浏览器支持的注意事项
熟悉浏览器景观的人可能会认识到谷歌LED项目 - 眨眼/铬(Chrome,Opera,Yandex,Vivaldi等)和Android - 具有最大的问题。有一个输入要么形成
元素。例如,<输入类型=“数字”lang =“en-150”>
。网页并不总是在其根元素上设置语言。对于表单输入,这一事项并将其设置在输入
要么形成
元素将帮助您的用户完成填写数字的任务。
我几乎想要建议你始终设置所有的输入语言<输入类型=“number”>
到一个使用逗号来获得周期和逗号支持的语言环境。如果浏览器决定在预期停止支持期间,则会导致未来的问题。然而,截至今天,这不是这种情况,但可能会改变。
一个值的价值<输入类型=“number”>
始终 - 除Internet Explorer中 - 设置为有效的十进制数。有没有办法阅读原始值,因为用户输入它。当提供无效值时,显示值按照用户提供它。但是,该值被清除并设置为空字符串。这是预期的行为!
有些浏览器将验证输入并困惑地显示输入周围的红色边框。从而提示用户纠正输入。这可能有些不清楚用户。使用JavaScript,输入
元素有效
物业有效性
可以测试。
这可用于显示自定义错误消息,抖动动画或以其他方式提示用户纠正信息。另一种具有更可靠的支持的方式是阅读输入
元素输入
事件。
通过检查该事件来处理事件输入
元素值
不是空字符串,是一个有效的十进制数(对于Internet Explorer和旧版浏览器),然后提示用户提供有效输入。使用输入事件非常鼓励其他事件键
那糊
, 要么更改
事件支持剪贴板,键盘,手写,我,以及其他形式的输入。考虑使用广泛支持的模糊
作为遗留浏览器的反驳活动,即使它不那么可靠输入
事件。
很难指示用户在预期的输入上,因为您无法测试表格是否是本地化的。每种浏览器都支持一个句点作为十进制分隔符的输入,因此可以安全地使用这一点。为了减少错误的可能性,即使在不匹配用户的语言环境时也可以考虑将输入元素的占位符属性设置为有效的浮点数。
建议在JavaScript中具有倒置解析作为较旧的浏览器不支持数字输入类型。注意确保任何服务器验证都与浏览器所完成的客户端验证相同(有type =“number”
)和javascript。
向实施者推荐(浏览器)
无论任何区域设置暗示如何,请支持该时期和逗号,因为无论任何区域设置如何。苹果在这里得到了正确的想法!
当达千分离器[5],它只是一个剥离除最后一个之外的每隔十进制标记符号(无论是句号还是逗号)的问题。国际单位系统(SI)建议使用空间来分组数字来减少格式混淆。阅读本文后,我希望您同意。