从输入 type=number 中删除前导零

Question

我注意到，如果我使用 <input type="number" />，则不会删除前导零。我还看到很多关于如何保持前导零的讨论。

例如“000023”和“23”是相同的数字，我认为保留这些零没有意义。

Answer 1

Html 输入标签总是 return 文本，而不是数字，甚至它的内容可以被强制转换为数字格式、日期等...

接下来您应该将该输入转换为实际数字格式：

parseInt(myNum); // If you expect an integer.
parseFloat(myNum); // If you expect floating point number.

Answer 2

只需使用像这样的正则表达式

textboxText= textboxText.replace(/^0+/, '')

Answer 3

你可以试试这个。

    str1 = str.replace(/^0+/,'');

Answer 4

试试这个：

<!DOCTYPE html>
<html>
<body>

<input type="number" id="txtfield" /><button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var myNumber = document.getElementById("txtfield").value;
    document.write(parseInt(myNumber ,10));
}
</script>

</body>
</html>

Answer 5

HTML5 有 <input type="tel"> 用于此目的

Answer 6

我将举一个反应用法的例子。它使用 state 存储字段的值。但是，我认为你可以用你喜欢的任何变量替换它。

<input type='number' value={Number(this.state.myNumber).toString()}/>

在我的例子中，myNumber 存储了一个年份数字。这样，年份 2018（例如）就不会被错误地显示为 02018。

Answer 7

将 step="any" 添加到您的输入标签。如果这在您的浏览器上不起作用，请将类型更改为 type="tel"

Answer 8

我在使用 React 时使用的 hack 是将数字公开转换为字符串。
使用 value=myNumber.toString()，而不是 value=myNumber.
仅当输入类型为“数字”时才需要，如果类型为“文本”时则不需要。

如果您的变量初始化为 null，您可以通过将错误值更改为 0 来防止错误，如：value=(myNumber || 0).toString().

class inputHours extends React.Component {

    this.state = { hours: 0};

    render() {
      return ( 
              <label>Hours: could show Leading 0's</label>
              <input  type="number" min="0" max="24"
                      value={this.state.hours}
                      onChange={this.onChangeHours}
              />

              <label>Hours: strips leading zeros</label>
              <input type="number" min="0" max="24"
                      value={this.state.hours.toString()}
                      onChange={this.onChangeHours}
              />
      );
    }

在第一种情况下，即使您在 onChangeHours 处理程序中去除前导零，也会通过 parseInt() 强制转换回整数，并调用 setState() 来保存数字将前导零返回到状态对象，告诉 React 重新渲染，输入字段本身不会更新以删除任何前导零。
但是这个问题只有在输入类型设置为“数字”时才会出现。
如果它设置为键入“文本”，则没有问题，前导零将按预期删除。
在这两种情况下，console.log() 表明存储在 state 中的值确实去除了前导零（允许单个 0 作为值。）
即使输入字段本身可能显示额外的前导零。

我最好的猜测是 React 在内部看到一个整数 0 === 000，所以它不会更新显示？？？但是在文本字符串中，'0' != '000'，所以它知道它必须更新呈现的字段。
无论如何，明显的强制转换似乎迫使输入字段正确更新和重新呈现。

从输入 type=number 中删除前导零

Remove leading zeros from input type=number

html

javascript

validation

numbers

input