feat:将3个文本框默认初始文字改为占位提示语,统一提示文案:请输入
This commit is contained in:
@@ -397,6 +397,13 @@ html, body {
|
|||||||
cursor: grab;
|
cursor: grab;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 空输入框显示 placeholder */
|
||||||
|
.text-input.show-placeholder::before {
|
||||||
|
content: attr(data-placeholder);
|
||||||
|
color: #999;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* 编辑状态(双击) - 显示实线轮廓 */
|
/* 编辑状态(双击) - 显示实线轮廓 */
|
||||||
.text-input.editing {
|
.text-input.editing {
|
||||||
outline: 2px solid #4a90e2;
|
outline: 2px solid #4a90e2;
|
||||||
|
|||||||
@@ -86,11 +86,11 @@
|
|||||||
<!-- 输入框图层 -->
|
<!-- 输入框图层 -->
|
||||||
<div class="preview-input-layer" id="previewInputLayer">
|
<div class="preview-input-layer" id="previewInputLayer">
|
||||||
<!-- 文字输入框1 - 企业 -->
|
<!-- 文字输入框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 - 姓名 -->
|
<!-- 文字输入框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 - 编号 -->
|
<!-- 文字输入框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>
|
||||||
<!-- 提示文字(最上层,层叠图之下) -->
|
<!-- 提示文字(最上层,层叠图之下) -->
|
||||||
<div class="empty-tip" id="emptyTip">请点击上方「添加图片」按钮上传背景图</div>
|
<div class="empty-tip" id="emptyTip">请点击上方「添加图片」按钮上传背景图</div>
|
||||||
|
|||||||
36
js/script.js
36
js/script.js
@@ -851,6 +851,28 @@
|
|||||||
let clickStartY = 0;
|
let clickStartY = 0;
|
||||||
let hasMoved = false;
|
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('mousedown', handleStart);
|
||||||
element.addEventListener('touchstart', handleStart, { passive: false });
|
element.addEventListener('touchstart', handleStart, { passive: false });
|
||||||
@@ -1083,6 +1105,20 @@
|
|||||||
element.classList.remove('editing');
|
element.classList.remove('editing');
|
||||||
element.classList.add('selected');
|
element.classList.add('selected');
|
||||||
element.contentEditable = 'false';
|
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();
|
element.blur();
|
||||||
editingInput = null;
|
editingInput = null;
|
||||||
// 隐藏编辑器工具栏
|
// 隐藏编辑器工具栏
|
||||||
|
|||||||
Reference in New Issue
Block a user