fix: 修复字号调整逻辑,实现每个输入框独立按自身当前字号增减

This commit is contained in:
Zhukj
2026-04-16 17:47:52 +08:00
parent bd21bc0503
commit 52cc784478
4 changed files with 91 additions and 18 deletions

View File

@@ -425,6 +425,9 @@
element.classList.add('selected');
element.classList.remove('editing');
element.contentEditable = 'false';
// 更新工具栏状态
updateToolbarState(element);
}
// 开始编辑
@@ -496,7 +499,12 @@
}
// 更新字号选择器
fontSizePicker.value = fontSize.toString();
const fontSizeValueEl = fontSizePicker.querySelector('.roller-value');
if (fontSizeValueEl) {
const displaySize = isNaN(fontSize) ? 16 : fontSize;
fontSizeValueEl.textContent = displaySize.toString();
fontSizeValue = displaySize;
}
}
// RGB转十六进制
@@ -622,11 +630,52 @@
editingInput.style.fontFamily = fontPicker.value + ', sans-serif';
});
// 字号选择器
fontSizePicker.addEventListener('change', () => {
if (!editingInput) return;
editingInput.style.fontSize = fontSizePicker.value + 'px';
// 字号选择器 - 密码锁式滚轮
let fontSizeValue = 16;
const fontSizeRoller = document.getElementById('fontSizePicker');
const fontSizeValueEl = fontSizeRoller.querySelector('.roller-value');
const fontSizeUpBtn = fontSizeRoller.querySelector('.roller-up');
const fontSizeDownBtn = fontSizeRoller.querySelector('.roller-down');
function updateFontSize(newSize, forceUpdate = false) {
newSize = Math.max(10, Math.min(42, newSize));
const targetInput = editingInput || selectedInput;
if (forceUpdate || targetInput) {
targetInput.style.fontSize = newSize + 'px';
fontSizeValue = newSize;
fontSizeValueEl.textContent = newSize;
} else {
fontSizeValue = newSize;
fontSizeValueEl.textContent = newSize;
}
}
fontSizeUpBtn.addEventListener('click', () => {
const targetInput = editingInput || selectedInput;
if (targetInput) {
const currentSize = parseInt(window.getComputedStyle(targetInput).fontSize) || fontSizeValue;
updateFontSize(currentSize + 1, true);
}
});
fontSizeDownBtn.addEventListener('click', () => {
const targetInput = editingInput || selectedInput;
if (targetInput) {
const currentSize = parseInt(window.getComputedStyle(targetInput).fontSize) || fontSizeValue;
updateFontSize(currentSize - 1, true);
}
});
fontSizeRoller.addEventListener('wheel', (e) => {
e.preventDefault();
const targetInput = editingInput || selectedInput;
if (targetInput) {
const currentSize = parseInt(window.getComputedStyle(targetInput).fontSize) || fontSizeValue;
const delta = e.deltaY > 0 ? -1 : 1;
updateFontSize(currentSize + delta, true);
}
}, { passive: false });
}
// 显示右键菜单