Как можно реализовать увеличение размера шрифта текста до исходного, если он помещается в строку, при сохранении функционала уменьшения размера шрифта при необходимости?
Для изменения размера шрифта на веб-странице с помощью 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