Html5 输入类型数字格式

Question

我有这个页面，我在其中使用了输入类型编号。这样它将在 wp、android 和 ios 设备上显示数字键盘。

但我的问题是，如果用户在设备上使用文化信息。让我们说丹麦。显示的数字键盘使用 , 而不是 .

但输入的号码不接受，只接受。有人知道如何做到这一点吗？

感谢您的宝贵时间。

Answer 1

当使用 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

Answer 2

尝试在 <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 输入类型可能会被欺骗，因此您仍然需要进行服务器端验证。

Html5 输入类型数字格式

Html5 input type number formatting

html

iphone

android

input

windows-phone-8