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; // 隐藏编辑器工具栏