时间戳

首页 > 解决方案 > 如何在 HTML 输入中添加零？

html - 如何在 HTML 输入中添加零？

问题描述

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

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

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

标签： html

解决方案

您可以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;
  }
});
<input formControlName="userNumber" type="text" class="form-control" placeholder="User #" aria-label="userNumber" aria-describedby="userNumber">

推荐阅读