Динамически ввод ширины (и центра) в зависимости от длины ввода

Question

У меня есть абсолютно позиционированные входы, которые обычно имеют длину 1 di git в качестве входных данных.

Я установил ширину входа в 8px, и все отлично работает. Однако иногда мы можем иметь до 4 цифр на входе. В этом случае я хочу, чтобы вход автоматически расширялся, чтобы соответствовать, сохраняя выравнивание по центру.

Входы расположены на сетке определенным образом c и требуют абсолютного позиционирования.

Для упрощенного примера, https://jsfiddle.net/joshuaohana/2var8ftL/1/

В этом случае я хочу иметь возможность ввести 1234 в качестве ввода, поле должно расширяться с увеличением длины ввода и центра поля ввода должны оставаться в том же месте.

<div class="container">
  <div class="input1">
    <input placeholder="1" />
  </div>
  <div class="input2">
    <input placeholder="2" />
  </div>
</div>

и css

.container {
  position: relative;
  padding: 10px;
  border: 1px solid blue;
  width: 150px;
  height: 150px;
}

.input1 {
  position: absolute;
  top: 5px;
  left: 5px;
}

.input2 {
  position: absolute;
  top: 50px;
  left: 25px;
}

input {
  width: 8px;
}

Answer 1

Если вы открыты для использования contenteditable, это должно быть легко сделать sh

.container {
  position: relative;
  padding: 10px;
  border: 1px solid blue;
  width: 150px;
  height: 150px;
}

.input1 {
  position: absolute;
  top: 5px;
  left: 5px;
}

.input2 {
  position: absolute;
  top: 50px;
  left: 25px;
  transform:translateX(-50%);
}

[contenteditable] {
  border: 1px solid;
  min-width: 8px;
  max-width: calc(8px * 4);
  white-space:nowrap;
  overflow:hidden;
}

<div class="container">
  <div class="input1">
    <div contenteditable></div>
  </div>
  <div class="input2">
    <div contenteditable></div>
  </div>
</div>

Answer 2

Самый простой способ сделать это - создать элемент, отражающий значение невидимого поля ввода. Невозможно отрегулировать ширину ввода по содержимому без обмана. То есть, если вам не нужны возможности полного редактирования, такие как перемещение курсора.

Если вы это сделаете, я бы предпочел иметь невидимый элемент <div> и установить его значение в соответствии с тем, что вы вводите в свой <input>. Затем вы прочитали бы ширину этого <div> и установили бы ту же ширину для вашего <input>. Просто помните, что они оба должны иметь одинаковые font-family, font-size и любое другое свойство, связанное со шрифтами.