diff --git a/css/style.css b/css/style.css
index 3733b3d..6115c37 100644
--- a/css/style.css
+++ b/css/style.css
@@ -397,6 +397,13 @@ html, body {
cursor: grab;
}
+/* 空输入框显示 placeholder */
+.text-input.show-placeholder::before {
+ content: attr(data-placeholder);
+ color: #999;
+ pointer-events: none;
+}
+
/* 编辑状态(双击) - 显示实线轮廓 */
.text-input.editing {
outline: 2px solid #4a90e2;
diff --git a/index.html b/index.html
index e459e54..8e7937a 100644
--- a/index.html
+++ b/index.html
@@ -86,11 +86,11 @@
请点击上方「添加图片」按钮上传背景图
diff --git a/js/script.js b/js/script.js
index ba57ea9..32c8fc4 100644
--- a/js/script.js
+++ b/js/script.js
@@ -851,6 +851,28 @@
let clickStartY = 0;
let hasMoved = false;
+ // 检查是否需要显示 placeholder
+ function updatePlaceholder() {
+ // 获取纯文本内容(排除删除按钮)
+ const textContent = Array.from(element.childNodes)
+ .filter(node => node.nodeType === Node.TEXT_NODE || (node.nodeType === Node.ELEMENT_NODE && !node.classList.contains('text-delete-btn')))
+ .map(node => node.textContent)
+ .join('')
+ .trim();
+
+ if (!textContent) {
+ element.classList.add('show-placeholder');
+ } else {
+ element.classList.remove('show-placeholder');
+ }
+ }
+
+ // 初始化时检查
+ updatePlaceholder();
+
+ // 监听输入事件,控制 placeholder 显示
+ element.addEventListener('input', updatePlaceholder);
+
// 鼠标/触摸按下
element.addEventListener('mousedown', handleStart);
element.addEventListener('touchstart', handleStart, { passive: false });
@@ -1083,6 +1105,20 @@
element.classList.remove('editing');
element.classList.add('selected');
element.contentEditable = 'false';
+
+ // 检查是否需要显示 placeholder
+ const textContent = Array.from(element.childNodes)
+ .filter(node => node.nodeType === Node.TEXT_NODE || (node.nodeType === Node.ELEMENT_NODE && !node.classList.contains('text-delete-btn')))
+ .map(node => node.textContent)
+ .join('')
+ .trim();
+
+ if (!textContent) {
+ element.classList.add('show-placeholder');
+ } else {
+ element.classList.remove('show-placeholder');
+ }
+
element.blur();
editingInput = null;
// 隐藏编辑器工具栏