From 52cc784478a52996441127d39b7d6b0405c4eca6 Mon Sep 17 00:00:00 2001
From: Zhukj <3262118957>
Date: Thu, 16 Apr 2026 17:47:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AD=97=E5=8F=B7?=
=?UTF-8?q?=E8=B0=83=E6=95=B4=E9=80=BB=E8=BE=91=EF=BC=8C=E5=AE=9E=E7=8E=B0?=
=?UTF-8?q?=E6=AF=8F=E4=B8=AA=E8=BE=93=E5=85=A5=E6=A1=86=E7=8B=AC=E7=AB=8B?=
=?UTF-8?q?=E6=8C=89=E8=87=AA=E8=BA=AB=E5=BD=93=E5=89=8D=E5=AD=97=E5=8F=B7?=
=?UTF-8?q?=E5=A2=9E=E5=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 2 +-
css/style.css | 33 ++++++++++++++++++++++++++--
index.html | 15 +++++--------
js/script.js | 59 ++++++++++++++++++++++++++++++++++++++++++++++-----
4 files changed, 91 insertions(+), 18 deletions(-)
diff --git a/README.md b/README.md
index a2e2553..5817034 100644
--- a/README.md
+++ b/README.md
@@ -51,7 +51,7 @@
11. 添加图片尺寸不一致时可以左右滑动图片调整位置，并且图片反转拖拽
12. 电脑端右键保存/复制/预览图片，手机端长按屏幕弹窗保存/复制/预览图片，可预览
13. 顶部工具栏下方16px的位置，固定放置文本编辑器工具栏，加粗，斜体，字体颜色，字体，字号，可编辑文字样式
-14. 双击输入框进入编辑状态后，电脑端可左键滑动选的中字体，手机端可双击第二下不松滑动选的中字体
+14.
diff --git a/css/style.css b/css/style.css
index c685198..6da2311 100644
--- a/css/style.css
+++ b/css/style.css
@@ -118,8 +118,37 @@ html, body {
cursor: pointer;
}
-#fontSizePicker {
- min-width: 60px;
+/* 字号滚轮选择器 */
+.roller-picker {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 4px 8px;
+ background: #fff;
+ border: 1px solid #ddd;
+ border-radius: 6px;
+ min-width: 65px;
+ height: 36px;
+}
+
+.roller-arrow {
+ font-size: 10px;
+ color: #666;
+ cursor: pointer;
+ padding: 2px 4px;
+ user-select: none;
+ transition: color 0.2s;
+}
+
+.roller-arrow:hover {
+ color: #4a90e2;
+}
+
+.roller-value {
+ font-size: 14px;
+ min-width: 24px;
+ text-align: center;
+ color: #333;
}
#fontPicker {
diff --git a/index.html b/index.html
index 32ac1de..c36fb5b 100644
--- a/index.html
+++ b/index.html
@@ -36,16 +36,11 @@
diff --git a/js/script.js b/js/script.js
index 7566416..08997f9 100644
--- a/js/script.js
+++ b/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 });
}
// 显示右键菜单