fix: 修复字号调整逻辑,实现每个输入框独立按自身当前字号增减
This commit is contained in:
59
js/script.js
59
js/script.js
@@ -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 });
|
||||
}
|
||||
|
||||
// 显示右键菜单
|
||||
|
||||
Reference in New Issue
Block a user