首页 文章

在HTML5数字输入中强制小数点而不是逗号(客户端)

提问于
浏览
60

我已经看到一些浏览器本地化 input type="number" 数字符号 .

所以现在,在我的应用程序显示经度和纬度坐标的字段中,我得到像"51,983"这样的东西,它应该是"51.982559" . 我的解决方法是使用 input type="text" 代替,但我想使用数字输入正确显示小数 .

无论客户端本地设置如何,有没有办法在数字输入中使用 force browsers to use a decimal point

(不言而喻,在我的应用程序中,我无论如何都要在服务器端纠正这一点,但在我的设置中我还需要它在客户端是正确的(因为一些JavaScript)) .

提前致谢 .

UPDATE 截至目前,在Windows 7上检查Chrome版本28.0.1500.71 m,输入的数字只是不接受用逗号格式化的小数 . 使用 step 属性的建议建议似乎不起作用 .

http://jsfiddle.net/AsJsj/

12 回答

  • 1

    如果 step 属性指定了所需小数的精度,则html5数字输入将接受小数 . 例如 . 取值10.56;我是指2位小数,请执行以下操作:

    <input type="number" step="0.01" min="0" lang="en" value="1.99">
    

    您可以进一步为最大允许值指定 max 属性 .

    Edit 使用区域设置值为输入元素添加 lang 属性,该值使用点而不是逗号格式化小数

  • 0

    目前,Firefox尊重输入所在的HTML元素的语言 . 例如,在Firefox中尝试这个小提琴:

    http://jsfiddle.net/ashraf_sabry_m/yzzhop75/1/

    您将看到数字是阿拉伯语,逗号用作小数分隔符,阿拉伯语就是这种情况 . 这是因为 BODY 标签的属性为 lang="ar-EG" .

    接下来,尝试这个:

    http://jsfiddle.net/ashraf_sabry_m/yzzhop75/2/

    显示一个点作为小数点分隔符,因为输入包含 DIV 属性 DIV .

    因此,您可以使用的解决方案是使用容器元素包装数字输入,该容器元素设置为使用使用点作为小数分隔符的区域性 .

  • 2

    根据spec,您可以使用 any 作为 step 属性的值:

    <input type="number" step="any">
    
  • 0

    遗憾的是,现代浏览器中此输入字段的覆盖率非常低:

    http://caniuse.com/#feat=input-number

    因此,我建议期望回退并依赖于以编程方式加载的输入[type = text]来完成工作,直到该字段被普遍接受为止 .

    到目前为止,只有Chrome,Safari和Opera有一个很好的实现,但所有其他浏览器都有错误 . 其中一些,甚至似乎不支持小数(如BB10)!

  • 0

    我不知道这是否有帮助,但我在搜索同样的问题时偶然发现,只是从输入的角度来看(即我注意到我的 <input type="number" /> 在输入值时接受了逗号和点,但只有后者被绑定到我分配给输入的angularjs模型) . 所以我通过记下这个快速指令解决了:

    .directive("replaceComma", function() {
        return {
            restrict: "A",
            link: function(scope, element) {
                element.on("keydown", function(e) {
                    if(e.keyCode === 188) {
                        this.value += ".";
                        e.preventDefault();
                    }
                });
            }
        };
    });
    

    然后,在我的html上,简单地说: <input type="number" ng-model="foo" replace-comma /> 将动态地用逗号替换逗号以防止用户输入无效(从javascript角度来看,而不是语言环境!)数字 . 干杯 .

  • 7

    1)51,983是一个字符串类型号,不接受逗号

    所以你应该把它设置为文本

    <input type="text" name="commanumber" id="commanumber" value="1,99" step='0.01' min='0' />
    

    用 . . . 来代替 .

    并将type属性更改为number

    $(document).ready(function() {
        var s = $('#commanumber').val().replace(/\,/g, '.');   
        $('#commanumber').attr('type','number');   
        $('#commanumber').val(s);   
    });
    

    看看http://jsfiddle.net/ydf3kxgu/

    希望这能解决你的问题

  • 0

    我找到了一篇博客文章,似乎解释了一些相关内容:
    HTML5 input type=number and decimals/floats in Chrome

    综上所述:

    • step 有助于定义有效值的域

    • 默认 step1

    • 因此默认域是整数(在 minmax 之间,包括在内,如果给定)

    我认为这与使用逗号作为千分隔符而不是逗号作为小数点的模糊性相混淆,而你的 51,983 实际上是一个奇怪解析的五十一千九百八十三 .

    显然你可以使用 step="any" 将域扩展到范围内的所有有理数,但是我成功地使用了:'ve not tried it myself. For latitude and longitude I'已成功使用:

    <input name="lat" type="number" min="-90.000000" max="90.000000" step="0.000001">
    <input name="lon" type="number" min="-180.000000" max="180.000000" step="0.000001">
    

    它可能不漂亮,但它的工作原理 .

  • -1

    据我了解,HTML5 input type="number 始终返回 input.value 作为 string .

    显然, input.valueAsNumber 将当前值作为浮点数返回 . 您可以使用它来返回您想要的值 .

    http://diveintohtml5.info/forms.html#type-number

  • 1

    您是否考虑过使用Javascript?

    $('input').val($('input').val().replace(',', '.'));

  • 1

    一个选择是 javascript parseFloat() ...永远不要解析“ text chain" --> 12.3456 指向一个int ... 123456 (int删除点)解析文本链到FLOAT ...

    将此coords发送到服务器执行此操作发送文本链 . HTTP 只发送 TEXT

    在客户端不使用“ int ”解析输入坐标,使用文本字符串

    如果你用PHP或类似的方式在html中打印线...浮动到文本并在html中打印

  • 18

    在输入上使用lang attribut . 我的网络应用上的区域设置fr_FR,输入数字上的lang =“en_EN”,我可以无差别地使用逗号或点 . Firefox总是显示一个点,Chrome显示一个逗号 . 但两个separtor都是有效的 .

  • 17

    使用模式

    <input 
           type="number" 
           name="price"
           pattern="[0-9]+([\.,][0-9]+)?" 
           step="0.01"
           title="This should be a number with up to 2 decimal places."
    >
    

    祝好运

相关问题