Как динамически уменьшать размер шрифта и увеличивать его?

Question

[accountnujen]

Есть input text. Я пытаюсь сделать так, чтобы в случае, если текст не помещается в строку - размер шрифта динамически уменьшался. А если место есть - увеличивался до того размера, который был изначально. Уменьшение я реализовал, а вот увеличение до первоначального и проверка возможности увеличения мне не даётся.

document.addEventListener('DOMContentLoaded', () => {
    const valueWidth = q("input").scrollWidth;

    qq("input").forEach(e => {
    	e.addEventListener("input", () => {
    		console.log([e.scrollWidth, valueWidth])
    			while (e.scrollWidth > valueWidth) {
    				let nowSize = parseFloat(getComputedStyle(e).fontSize);
    				e.style.fontSize = nowSize - 1 + "px";
    			}
    	})
    })
});

Answer 1

[Полина]

У вас не сохранен исходный размер. Он нам нужен чтоб знать до каких пределов увеличивать.
Допустим, нам надо проверить длину поля после ввода и удаления символов.

document.addEventListener('DOMContentLoaded', () => {
    const inputElement = document.querySelector("input");
    const originalFontSize = parseFloat(getComputedStyle(inputElement).fontSize);
    let currentSize = originalFontSize;
    // переменная для последнего значения поля input
    let lastValue = '';

    inputElement.addEventListener("input", () => {
        const value = inputElement.value;

        if (value.length > lastValue.length) {
            // добавлен символ
            if (inputElement.scrollWidth > inputElement.clientWidth) {
                // текст не помещается, уменьшаем шрифт
                currentSize -= 1;
            }
        } else if (value.length < lastValue.length) {
            // удалён символ
            if (currentSize < originalFontSize) {
                // восстанавливаем размер шрифта до начального
                currentSize += 1;
            }
        }

        inputElement.style.fontSize = `${currentSize}px`;
        // console.log(`Размер шрифта: ${currentSize}px`);
        lastValue = value;
    });

    // инициализация размера шрифта
    inputElement.style.fontSize = `${originalFontSize}px`;
});

Если ширина поля ввода фиксированная, то примерно так. Если она динамическая, надо добавить проверку на ширину input
В обработчик можно еще добавить value.length === lastValue.length (например, для замены моноширинного символа или копипаста с цифрами). Но если у вас символы разной ширины (например, Ш и W занимают больше места), то лучше проверить влезают ли буквы даже если длина строки не менялась.