53

我在 Chrome 中运行的 Web 应用程序上工作，我在其中输入 type number。在我的语言环境中，逗号用于十进制数字，空格用于千位分隔（不是那么重要），但是当我将这些字符输入数字字段时，它们会被简单地删除，从而有效地将金额增加了一百。

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

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

4

5 回答 5

39

由于定义和实现， HTML5input type=number从本地化的角度来看是不充分的。它旨在本地化，但根据浏览器的语言环境，您无法设置，甚至无法作为设计者/作者知道。

在我的 Chrome 上，input type=number step=0.001接受 1,2（带逗号）并将其作为 1.2 发送，它接受 1.200（带句点），明显将其转换为 1200 并按原样发送。当浏览器区域设置为芬兰语时，或多或少就是这样。但它无法接受 1 200（这是芬兰语中 1200 的标准书写方式），而是仅发送数字 1。

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

于 2012-11-16T12:09:02.353 回答
27

如果您不需要向上/向下刻度，则遵循解决方法可以提供帮助：

仅用于逗号 (,)（如德语语法）：

<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;
}

lang“全局”属性也可以改变所有没有自己的 lang 属性的输入元素的行为（谢谢@florian）：

<html lang="en">

看：

有效语言值列表： https ://github.com/libyal/libfwnt/wiki/Language-Code-identifiers

于 2015-10-06T14:21:14.483 回答
12

规范很明确：只允许使用句点作为小数分隔符。由浏览器来为表单提供本地化支持。不允许使用千位分隔符。

于 2015-02-24T20:16:53.680 回答
3

不幸的是，这些字符不允许出现在<input type="number">

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

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

于 2012-11-16T07:44:26.593 回答
0

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

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

React 中的最小示例：

<input
  type="number"
  lang={navigator.language}
/>
于 2021-05-26T14:15:47.237 回答