Как можно реализовать увеличение размера шрифта текста до исходного, если он помещается в строку, при сохранении функционала уменьшения размера шрифта при необходимости?
Для изменения размера шрифта на веб-странице с помощью JavaScript можно использовать следующий код: ```javascript // Увеличение размера шрифта document.body.style.fontSize = "16px"; // устанавливаем начальный размер шрифта function increaseFontSize() { var currentSize = parseFloat(document.body.style.fontSize); document.body.style.fontSize = (currentSize + 1) + "px"; // увеличиваем размер шрифта на 1 пиксель } // Уменьшение размера шрифта function decreaseFontSize() { var currentSize = parseFloat(document.body.style.fontSize); document.body.style.fontSize = (currentSize - 1) + "px"; // уменьшаем размер шрифта на 1 пиксель } ``` Для реализации увеличения размера шрифта до исходного, если текст помещается в строку, можно создать дополнительную функцию, которая будет проверять размер текста и, в случае его уменьшения, возвращать размер к исходному: ```javascript // Увеличение размера шрифта до исходного function increaseFontSizeToOriginal() { var textContainer = document.getElementById("text-container"); // предположим, что текст находится в элементе с идентификатором "text-container" var originalSize = parseFloat(window.getComputedStyle(textContainer, null).getPropertyValue('font-size')); var currentSize = parseFloat(textContainer.style.fontSize); if (currentSize < originalSize) { textContainer.style.fontSize = originalSize + "px"; // возвращаем размер шрифта к исходному } } ``` Теперь при необходимости увеличить размер шрифта до исходного после его уменьшения, можно вызвать функцию `increaseFontSizeToOriginal()`.
У вас не сохранен исходный размер. Он нам нужен чтоб знать до каких пределов увеличивать.
Допустим, нам надо проверить длину поля после ввода и удаления символов.
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