从输入 type=number 中删除前导零
Posted
技术标签:
【中文标题】从输入 type=number 中删除前导零【英文标题】：Remove leading zeros from input type=number 【发布时间】：2015-08-18 00:24:47 【问题描述】：我注意到，如果我使用<input type="number" />，则不会删除前导零。我还看到很多关于如何保持前导零的讨论。
例如“000023”和“23”是同一个数字，我认为保留这些零是没有意义的。
【问题讨论】：
你实际上想做什么？ 因为我有一个包含金额的输入，所以最好不要显示前导零。 您面临的问题是什么？如何去除前导零或质疑将前导零留在显示中是否明智？ 【参考方案1】：我将举一个 react 用法的例子。它使用state 存储字段的值。但是，我认为你可以用你喜欢的任何变量替换它。
<input type='number' value=Number(this.state.myNumber).toString()/>
在我的例子中，myNumber 存储年份编号。这样，年份2018（例如）就不会被错误地显示为02018。
【讨论】：
像魅力一样工作。此外，如果您正在执行任何将其转换为数字的处理，则不需要 Number() 部分。例如，在我的数字中，我将数字四舍五入，所以我只需要this.state.myNumber.toString()
这不会让你输入像24.036 小数点后前导零的数字。
这很漂亮，直到我不得不输入 5..7.. 然后将光标移动到中间，然后是 0，才能得到 0.507，但是谢谢！【参考方案2】：
只需使用这样的正则表达式
textboxText= textboxText.replace(/^0+/, '')
【讨论】：
真的是正则表达式吗？为什么不像+'00022'.toString()
它阻止十进制分隔符【参考方案3】：
html 输入标签总是返回文本，而不是数字，甚至它的内容可以被强制转换为数字格式、日期等...
所以接下来你应该将该输入转换为实际的数字格式：
parseInt(myNum); // If you expect an integer.
parseFloat(myNum); // If you expect floating point number.
【讨论】：
似乎需要付出很多努力才能摆脱数字字符串中的前导零。同样，在这两种情况下+'00022'.toString() 都可以工作
另外，在不提供radix 的情况下使用parseInt 可能是不安全的
你在隐含地做同样的事情。 "+00002" 只是强制强制类型强制（即在这种情况下调用 parseInt()），此外，还要付出更多努力将其再次转换为字符串，我发现，在最好的情况下，这不是故意的。跨度>
强制不调用parseInt。与parseInt 不同，使用+ 或Number 时不需要radix，因为内部数字转换不会解析八进制数字。parseInt:Although discouraged by ECMAScript 3 and forbidden by ECMAScript 5, many implementations interpret a numeric string beginning with a leading 0 as octal. The following may have an octal result, or it may have a decimal result. Always specify a radix to avoid this unreliable behavior.【参考方案4】：
HTML5 有 <input type="tel"> 用于此目的
【讨论】：
这类字段的用途是输入电话号码，其格式与金额不同。此外，一些移动浏览器在编辑时会显示没有“，”字符的键盘（电话号码中不存在）。【参考方案5】：你可以试试这个。
str1 = str.replace(/^0+/,'');
【讨论】：
这与@Bhanu Chowdary 给出的答案有何不同？ 其实那时我还没有看到他的回答。 @Xotic750【参考方案6】：试试这个：
<!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>
【讨论】：
【参考方案7】：将 step="any" 添加到您的输入标签。 如果这在您的浏览器上不起作用，请将类型更改为 type="tel"
【讨论】：
type="tel" 仍然允许前导零，尽管它可能是仅过滤整数的有用技巧。 我正在寻找 DISPLAY 前导零的答案，或者实际上，在移动设备上显示漂亮的数字输入时将它们保持在输入状态，似乎type="tel" 是要走的路！【参考方案8】：
我在使用 React 时使用的技巧是将数字公然转换为字符串。
使用value=myNumber.toString()，而不是value=myNumber。
这仅在输入 type="number" 时才需要，而不是在 type="text"` 时才需要。
如果您的变量初始化为 null，您可以通过将 false 值更改为 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() 将没有前导零的数字保存回状态对象，告诉响应重新渲染，输入字段本身不会更新以删除任何前导零。
但是这个问题只有在输入类型设置为“数字”时才会出现。
如果设置为“文本”类型，则没有问题，前导零会按预期删除。
在这两种情况下，console.log() 显示存储在 state 中的值确实去掉了前导零（允许单个 0 作为值。）
即使输入字段本身可能会显示额外的前导零。
我最好的猜测是 React 内部看到一个整数 0 === 000，所以它不会费心更新显示？？？ 但是在文本字符串中，'0' != '000'，所以它知道它必须更新呈现的字段。 无论如何，明显的强制似乎强制输入字段正确更新和重新渲染。
【讨论】：
以上是关于从输入 type=number 中删除前导零的主要内容，如果未能解决你的问题，请参考以下文章