如何在 HTML 输入中添加零？

【问题标题】：How to add zeros into HTML input?如何在 HTML 输入中添加零？
【发布时间】：2020-04-22 10:04:47
【问题描述】：

我有一个固定长度为 7 的 html 输入。如果用户输入 1234，我如何在这个输入前面加上多个零，以便获得所需的长度 7？

我只想在 UI 中执行此操作，因为我在 ts 代码中已经有一个方法，用于在此输入前加上零，以便将其正确发送到后端。

 <input formControlName="userNumber" type="text" class="form-control" placeholder="User #" aria-label="userNumber" aria-describedby="userNumber">

【问题讨论】：

这能回答你的问题吗？ Fill html input with zeros (0)

标签： html

【解决方案1】：

您可以在输入字段上使用input 事件。一旦用户输入了一些数字，然后当输入字段失去焦点时，将添加所需数量的零。

const $input = document.querySelector('input');

$input.addEventListener('change', (e) => {
  const value = e.target.value;
  const length = e.target.value.length;
  
  if (length === 0) {
     $input.value = value;
  }
  else if (length < 7) {
    $input.value = '0'.repeat(7-length) + value;
  }
});

&lt;input formControlName="userNumber" type="text" class="form-control" placeholder="User #" aria-label="userNumber" aria-describedby="userNumber"&gt;

【讨论】：