输入类型数字的本地化

问题描述 投票：0回答：6

我正在开发一个在 Chrome 中运行的 Web 应用程序，其中我有类型为 

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

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

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

html browser localization
6个回答
44
投票

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
更好，除非所有用户都使用具有相同区域设置的浏览器并且对数字格式有相同的期望。

38
投票

如果您不需要向上/向下刻度，则以下解决方法会有所帮助：

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

<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 属性的输入元素的行为（thx @florian）：

<html lang="en">

参见：

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

12
投票

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

3
投票

不幸的是，这些字符在

<input type="number">

中是不允许的

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

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

0
投票

Chrome 使用浏览器设置，而 Firefox 则不然。至少不总是 - 例如当 

<html>
标签中有 lang 属性时，Firefox 使用该属性。

但是，您也可以将 lang 属性直接传递给 

<input>
标签。 将此与 Navigator API 结合起来可以模拟 Chrome 行为。

React 中的最小示例：

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

离开弗兰克的回答，我自己设法解决了这个问题。我遇到的一个问题是，浏览器会在视图重新渲染期间尝试将其自己的本地化值插入到文本框中。这会导致 chrome 引发以下错误：

指定值“{value}”无法解析，或超出范围

为了防止这种情况发生，我扩展了MVC输入控件：

  public static class InputExtensions
  {
     public static MvcHtmlString NumberInput<TModel, TProperty>(this HtmlHelper<TModel> helper
            , Expression<Func<TModel, TProperty>> expression, string format = null)
     {
        // Get decimal value from the model
        var value = (decimal)ModelMetadata.FromLambdaExpression(expression, helper.ViewData).Model;
    
        // Render the input, this stops the browser from inserting it's own 'localized' format
        helper.TextBoxFor(expression, format, new { pattern = @"[0-9]+([\.][0-9]{1,2})?", @Value = value });
     }
  }

您只需从视图中调用分机即可：

 @Html.NumberInput(model => model.Input.SellAmount, "{0:f2}")

执行上述操作意味着我可以强制用户使用 000.00 格式的小数，在其他地方，我只是让 UICulture 在显示值（在标签等中）时接管

这解决了在本地系统上处理数字输入时的许多令人头痛的问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.