HTML5输入类型数字格式化

Question

HTML5输入类型数字格式化

androidiphonehtmlwindows-phone-8input

3

我有一个页面，我在上面使用了input type number。这样它就会在wp、android和ios设备上显示数字键盘。

但我的问题是，如果用户在设备上使用丹麦的Culture Info，则显示的数字键盘将使用“,”而不是“。”。

但输入数字不接受“，”，只接受“。”。有人有想法如何解决吗？

谢谢您的时间。

- DaCh

这是一个HTML5页面。包含了jQuery、AngularJS和Bootstrap。 - DaCh

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tagawa · Answer 1

尝试将<html>元素或<input>元素本身的lang属性设置为en，以强制小数点作为输入语法。例如：

<input type="number" name="myNum" id="myNum" lang="en">

然而，用户的环境甚至可能覆盖此设置，这种情况下唯一的选择是包含一个消息，要求使用小数点而不是逗号。

这是有关数字输入类型的区域设置处理的良好写作： https://www.aeyoun.com/posts/html5-input-number-localization.html

更新：

另一种选择是通过在<form>元素中使用novalidate属性来停止表单验证输入，如下所示：

<form novalidate>
  <input type="number" name="myNum" id="myNum">
  <button id="submit">Submit</button>
</form>

这会允许任何内容，甚至包括非数字，因此您必须设置JavaScript代码来检查和处理该值。

再次更新：

我刚想到另一种替代方案-使用`pattern`属性进行正则表达式检查，并使用普通的`text`输入类型。例如：

<input type="text" name="myNum" id="myNum" pattern="[0-9.]*">

优点：您可以精确控制用户可以输入的内容。

缺点：移动设备上的键盘不是数字键盘。

请注意，HTML输入类型可以被欺骗，因此仍然需要进行服务器端验证。

- Paul Lernmark · Answer 2

当使用jQuery检索值时，它会返回一个带有小数点分隔符的值。请尝试以下操作：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <input type="number" name="myNum" id="myNum">
  <button id="submit">Submit</button>
  <hr/>
  <code></code>
  <script>
    $("#submit").on("click",function() {
      var numericValue = $("#myNum").val();
      $("code").html(numericValue);
    });
  </script>
</body>
</html>

http://output.jsbin.com/xixunewowe