使用javascript，如何将值设置为以小数点结尾的数字输入(即"100"). [英] Using javascript, how to set a value to a number input that ends in decimal dot (ie. "100.")

问题描述

设置

假设我有这样的输入:< input id ="NumberInput" type ="number" step ="0.1"/>

由于这是一个数字字段，它将接受数字，减号和小数点.因此，浏览器允许我输入"100".(请注意末尾的小数点).如果我保留输入内容，则该值仍将保持不变，并允许我返回并完成数字(即"100.1").

问题

我无法在Chrome中使用JS来执行此操作，如下代码:

 document.getElementById('NumberInput').value ="100." 

输入将被设置为空(无论之前的值如何)和以下错误:

指定值"100".无法解析，或超出范围.
我同意这是"100"的意思.绝对不是有效数字.
问题
有没有解决办法，所以我可以用JS填充数字输入的开头，并允许用户仅插入十进制值(或编辑整数)?
我猜测，当输入"100."时，Chrome会在内部将该值存储为"100"，但会显示点，以便用户以后可以继续使用.这正是我所需要的，仅使用JS.
注释
我知道将输入定义为 type = text 可以解决此问题，但也会产生一些问题(与该问题无关)
使用jQuery或任何其他JS库/框架时出现相同的错误
我没有在其他任何浏览器上进行过测试，因为仅在Chrome中失败是个停滞不前
预先感谢，加油！
解决方案
由于您要接受非数字值(例如"100".)，我相信 type ="number" 对您来说太专业了.我建议您在自定义正则表达式中使用 type ="text" 和 pattern :
 
  input:invalid {background-color:#ffa0a0;}  
 < input type ="text" pattern ="[1-9] [0-9] *([.] [0-9]?)?"/>  
我使用的模式是:
  [1-9] [0-9] *([.] [0-9]?)?[1-9]任何非0的数字(因为前导数字不应为0)[0-9] *任意数量的跟进数字()?整个可选部分[.]单个."特点[0-9]?可选的一位数字 
Setup


Suppose I have an input like this: <input id="NumberInput" type="number" step="0.1" />

As this is a number field, it will accept digits, minus sign and decimal dot. Thus, browsers allow me to type in "100." (note the decimal dot at the end). If I leave the input, the value will still remain the same and it will allow me to return and finish the number (ie. "100.1").

Issue

I wasn't able to do this using JS in Chrome, as the following code: 
document.getElementById('NumberInput').value = "100."
the input will be set to empty (regardless of the previous value) and the following error:
The specified value "100." cannot be parsed, or is out of range.`
I agree that this makes sense as "100." is by no means a valid number.

Question

Is there any way around this, so I can populate the start of a number input with JS and allow user to insert only decimal value (or edit the whole number)?

I an guessing that when typing in "100.", Chrome internally stores this value as "100" but shows the dot so that the user can continue later. This is exactly what I need, only using JS.

Notes


I know that defining input as type=text will solve this, but would also create some problems (which are irrelevant to this question)
Same error appears when using jQuery or any other JS library/framework
I haven't tested this on any other browser, as failing in Chrome alone is a show-stopper


Thanks in advance, cheers!
解决方案
Since you're looking to accept non-number values (like "100.") I believe usage of type="number" is too specialized for you. I recommend you use type="text" and pattern, with a custom regex:



input:invalid { background-color: #ffa0a0; }

<input type="text" pattern="[1-9][0-9]*([.][0-9]?)?"/>





The pattern I used is:
[1-9][0-9]*([.][0-9]?)?

[1-9]                     any non-0 digit (since the leading digit shouldn't be 0)
     [0-9]*               any number of followup digits
           (         )?   a whole optional section
            [.]           a single "." character
               [0-9]?     an optional single digit


                        
这篇关于使用javascript，如何将值设置为以小数点结尾的数字输入(即"100").的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！