Как заставить ввод текста автоматически увеличиваться ⇐ CSS

[Anonymous]

Код:

Код: Выделить всё

Код: Выделить всё

input { /* There is only ever 1 input on this page anyways */
max-width: 80vw;
width: auto;
}

Я хочу, чтобы ширина моего увеличивалась по мере того, как пользователь печатает, от начальной ширины от 0 до 80 % ширины области просмотра. Я хочу, чтобы это вообще без JS, чтобы обеспечить совместимость со старыми браузерами, только CSS. В Интернете я видел два исправления, но ни одно из них не дает того, что мне нужно.

• Используйте редактируемый диапазон
  

  Код: Выделить всё

  Атрибуты диапазона по умолчанию позволяют избежать необходимости использования CSS. Моя проблема описана в этом более старом примере от другого пользователя, задающего тот же вопрос: https://stackoverflow.com/a/7168929/21973096. С помощью contenteditable пользователь может вставлять HTML и другие данные, которые мне не нужны, мне нужен только текст.
  
  < li>Использовать размер поля

Код: Выделить всё

Код: Выделить всё

input {
field-sizing: normal;
max-width: 80vw;
}

Свойство CSS field-sizing пока несовместимо с Firefox и Safari (https://developer.mozilla.org/en-US/docs/Web/CSS/ field-sizing#browser_compatibility) и, еще раз, мне нужна универсальная совместимость. Учитывая, что я ежедневно пользуюсь Firefox, это делает этот вариант еще менее подходящим.
Есть ли способ сделать это без JS, обеспечив при этом совместимость и ограничив ввод только текстом?

Подробнее здесь: https://stackoverflow.com/questions/792 ... omatically