【问题标题】:Html5 input type number formattingHtml5输入类型数字格式化
【发布时间】:2015-09-03 17:21:39
【问题描述】:

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

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

但是输入的数字不会接受,只有。 有人知道如何做到这一点吗?

感谢您的宝贵时间。

【问题讨论】:

  • 这是一个 html5 页面。包括 jquery angularjs 和 bootstrap

标签: android iphone html windows-phone-8 input


【解决方案1】:

尝试在<html> 元素或<input> 元素本身中将lang 属性设置为en,以强制使用小数点作为输入语法。例如:

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

但是用户的环境甚至可能会覆盖这一点,在这种情况下,唯一的选择是包含一条需要小数点而不是逗号的消息。

这是对数字输入类型的语言环境处理的一个很好的描述: https://www.aeyoun.com/posts/html5-input-number-localization.html

更新:

另一种选择是通过在&lt;form&gt; 元素中使用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 输入类型可能会被欺骗,因此您仍需要进行服务器端验证。

【讨论】:

    【解决方案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

    【讨论】:

    • 但是如果我们用','输入一个数值,它不会输出任何东西
    • 它在 Windows 上的 Chrome 中对我有用。您使用的是什么浏览器和设备?
    • 在我的示例中,我不提交表单。我使用 jquery 来获取值。提交表单时,会启动 html5 输入验证,这可能会给您带来问题吗?
    • @PaulLernmark 你在移动浏览器中试过这个吗?这确实是问题所在。
    • 我已经在装有 Lolipop 的 Androd 手机和 iPad 上尝试过 output.jsbin.com/xixunewowe。 Safari 和 Chrome。您是否尝试在输入字段上设置 step="any" 属性?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-08-17
    • 1970-01-01
    • 1970-01-01
    • 2014-11-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多