WeWork/invitation-maker
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:将3个文本框默认初始文字改为占位提示语，统一提示文案：请输入

Browse Source
This commit is contained in:
Zhukj
2026-04-20 13:55:34 +08:00
parent 443a52bf95
commit 9ed83631f7
3 changed files with 46 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
css/style.css
View File

@@ -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;

6
index.html
View File

@@ -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>

36
js/script.js
View File

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