@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";
    			}
    	})
    })
});
  • Вопрос задан
  • 85 просмотров
Пригласить эксперта
Ответы на вопрос 1
KarnaDev
@KarnaDev
Frontend developer
У вас не сохранен исходный размер. Он нам нужен чтоб знать до каких пределов увеличивать.
Допустим, нам надо проверить длину поля после ввода и удаления символов.
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 занимают больше места), то лучше проверить влезают ли буквы даже если длина строки не менялась.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы