html - 是否可以使输入类型数字适合其显示的数字宽度？

Question

有没有可能做这样的事情:

.input[type=number] {
    width: (width of the number inside of the input field)
}

Answer 1

用css做不到，用js实现很容易；

例如:

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

input.addEventListener('input', () => {
  const inputNumber = input.value;
  
  input.style.width = `${inputNumber}%`;
})

<input type="number" min="1" max="100" value="1"  class="myInput" />