From 9ed83631f7a1f4c83ca74db366dcca6fdeb3a512 Mon Sep 17 00:00:00 2001
From: Zhukj <3262118957>
Date: Mon, 20 Apr 2026 13:55:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=B0=863=E4=B8=AA=E6=96=87=E6=9C=AC?=
 =?UTF-8?q?=E6=A1=86=E9=BB=98=E8=AE=A4=E5=88=9D=E5=A7=8B=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E5=8D=A0=E4=BD=8D=E6=8F=90=E7=A4=BA=E8=AF=AD?=
 =?UTF-8?q?=EF=BC=8C=E7=BB=9F=E4=B8=80=E6=8F=90=E7=A4=BA=E6=96=87=E6=A1=88?=
 =?UTF-8?q?=EF=BC=9A=E8=AF=B7=E8=BE=93=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/style.css |  7 +++++++
 index.html    |  6 +++---
 js/script.js  | 36 ++++++++++++++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 3 deletions(-)

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 @@
                 <!-- 输入框图层 -->
                 <div class="preview-input-layer" id="previewInputLayer">
                     <!-- 文字输入框1 - 企业 -->
-                    <div class="text-input hidden" id="input1" contenteditable="false" style="left: 98px; top: 232.945px;">企业：</div>
+                    <div class="text-input hidden" id="input1" contenteditable="false" data-placeholder="请输入" style="left: 98px; top: 232.945px;"></div>
                     <!-- 文字输入框2 - 姓名 -->
-                    <div class="text-input hidden" id="input2" contenteditable="false" style="left: 98px; top: 275.555px;">姓名：</div>
+                    <div class="text-input hidden" id="input2" contenteditable="false" data-placeholder="请输入" style="left: 98px; top: 275.555px;"></div>
                     <!-- 文字输入框3 - 编号 -->
-                    <div class="text-input hidden" id="input3" contenteditable="false" style="left: 98px; top: 317.548px;">编号：</div>
+                    <div class="text-input hidden" id="input3" contenteditable="false" data-placeholder="请输入" style="left: 98px; top: 317.548px;"></div>
                 </div>
                 <!-- 提示文字（最上层，层叠图之下） -->
                 <div class="empty-tip" id="emptyTip">请点击上方「添加图片」按钮上传背景图</div>
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;
         // 隐藏编辑器工具栏