Question

我处理在Chrome中运行的网络应用程序，我的输入类型为number。在我的语言环境中，逗号用于十进制数字，空格用于千位分隔（不是那么重要），但是当我将这些字符输入数字字段时，它们只是被删除，有效地增加了一百个金额。

我已经在浏览器设置和页面上设置了语言，但我仍然需要使用句点来表示小数。有什么办法可以配置字段来接受逗号吗？

或者，我将不得不使用javascript来解决这个问题。我想我可以处理keydown事件并在用户输入时将逗号更改为句点，但这不会给用户带来很好的体验，是吗？那么如何在代码中以最小的占用空间实现这一目标呢？

Answer 1

由于定义和实现，HTML5 input type=number从本地化的角度来看是不够的。它应该是本地化的，但是根据浏览器的区域设置，您无法设置或甚至不知道它是设计者/作者。

在我的Chrome上，input type=number step=0.001接受1,2（使用逗号）并将其发送为1.2并接受1.200（带有句点），明显将其转换为1200并发送。当浏览器语言环境是芬兰语时，这或多或少都是这样的。但它没有接受1 200（这是用芬兰语写1200的标准方式），而只是发送数字1。

所以它相当无望。使用您可以找到的任何JavaScript小部件或简单的文本输入框。除非所有用户都使用具有相同语言环境的浏览器并且对数字格式有相同的期望，否则任何事情都可能比input type=number更好。

Answer 2

如果您不需要上/下标记，则按照解决方法可以提供帮助：

仅限德语逗号（，）：

<input type="text" pattern="[0-9]+([,][0-9]{1,2})?" name="amount">

仅限点（。）：

<input type="text" pattern="[0-9]+([\.][0-9]{1,2})?" name="amount">

两者但不在一起:(没有1000分隔符）

<input type="text" pattern="[0-9]+([\.|,][0-9]{1,2})?" name="amount">

否则为德语/德语的编号：

<input name="myinput" value="0" step="0.01" lang="de-DE" type="number">

并将其设为：

input[type=number] {
    -moz-appearance:textfield;
    -webkit-appearance: none;
    appearance: textfield;
}

Answer 3

规范很明确：只允许一段时间作为小数分隔符。它取决于浏览器为表单提供localization support。不允许使用千位分隔符。

Answer 4

不幸的是<input type="number">

中不允许使用这些字符

请参阅此处的规格： http://w3c.github.io/html-reference/datatypes.html#common.data.float-def

这是您想要的格式吗？ http://jsfiddle.net/S8rqY/

Answer 5

虽然 Chrome 使用浏览器设置，但 Firefox 不使用。至少不总是 - 例如当 <html> 标签中有 lang 属性时，Firefox 会使用它。

但是，您也可以将 lang 属性直接传递给 <input> 标签。将其与 Navigator API 结合可以模拟 Chromes 行为。

React 中的最小示例：

<input
  type="number"
  lang={navigator.language}
/>

输入类型编号的本地化

5 个答案: