diff --git a/css/style.css b/css/style.css
index 0e40faf..3a5053a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -56,6 +56,29 @@ html, body {
background: #3a7bc8;
}
+/* 文本输入框删除按钮 */
+.text-input .text-delete-btn {
+ position: absolute;
+ top: -10px;
+ right: -10px;
+ width: 20px;
+ height: 20px;
+ background: #e74c3c;
+ color: #fff;
+ border: none;
+ border-radius: 50%;
+ font-size: 12px;
+ line-height: 20px;
+ text-align: center;
+ cursor: pointer;
+ display: none;
+ z-index: 10;
+}
+
+.text-input.selected:not(.editing) .text-delete-btn {
+ display: block;
+}
+
/* 文本编辑器工具栏 */
.text-editor-toolbar {
display: flex;
diff --git a/index.html b/index.html
index e8f83b8..105d03c 100644
--- a/index.html
+++ b/index.html
@@ -10,9 +10,9 @@
-
-
-
+
+
+
diff --git a/js/script.js b/js/script.js
index a5b4d8e..7ab1712 100644
--- a/js/script.js
+++ b/js/script.js
@@ -86,6 +86,18 @@
initInput(input1);
initInput(input2);
+ // 为原有两个输入框添加删除按钮
+ [input1, input2].forEach(inputEl => {
+ const deleteBtn = document.createElement('button');
+ deleteBtn.className = 'text-delete-btn';
+ deleteBtn.innerHTML = '×';
+ deleteBtn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ inputEl.remove();
+ });
+ inputEl.appendChild(deleteBtn);
+ });
+
// 初始化图片滑动
initImageDrag();
@@ -201,6 +213,16 @@
textEl.style.left = (left / containerWidth * 100) + '%';
textEl.style.top = (top / containerHeight * 100) + '%';
+ // 删除按钮
+ const deleteBtn = document.createElement('button');
+ deleteBtn.className = 'text-delete-btn';
+ deleteBtn.innerHTML = '×';
+ deleteBtn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ textEl.remove();
+ });
+ textEl.appendChild(deleteBtn);
+
const inputLayer = container.querySelector('.preview-input-layer');
inputLayer.appendChild(textEl);
@@ -773,6 +795,15 @@
element.addEventListener('dblclick', (e) => {
e.stopPropagation();
startEdit(element);
+ element.dataset.justEdited = 'true';
+ setTimeout(() => { element.dataset.justEdited = 'false'; }, 200);
+ });
+
+ // 单击选中显示删除按钮
+ element.addEventListener('click', (e) => {
+ if (hasMoved) return;
+ if (element.dataset.justEdited === 'true') return;
+ element.classList.add('selected');
});
// 触摸双击检测(移动端双击进入编辑)
@@ -853,6 +884,7 @@
// 结束编辑
function endEdit(element) {
element.classList.remove('editing');
+ element.classList.add('selected');
element.contentEditable = 'false';
element.blur();
editingInput = null;