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;