fix(mobile): 优化编辑模式下的工具栏固定与交互
This commit is contained in:
@@ -104,6 +104,15 @@ html, body {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* 编辑模式:粘在视口顶部始终可见 */
|
||||
.editor-toolbar.editing-mode {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.editor-toolbar.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
|
||||
30
js/script.js
30
js/script.js
@@ -197,7 +197,18 @@
|
||||
}
|
||||
|
||||
imageContainer.addEventListener('click', handleContainerClick);
|
||||
imageContainer.addEventListener('touchend', handleContainerClick);
|
||||
// 移动端:touchend 时如果正在编辑文本,不处理容器点击
|
||||
imageContainer.addEventListener('touchend', (e) => {
|
||||
// 如果触摸目标是文本输入框或正在编辑,不触发容器点击
|
||||
if (e.target.closest('.text-input')) {
|
||||
return;
|
||||
}
|
||||
// 如果正在编辑文本,不触发容器点击(避免隐藏工具栏)
|
||||
if (editingInput) {
|
||||
return;
|
||||
}
|
||||
handleContainerClick(e);
|
||||
});
|
||||
|
||||
// 初始化长按保存(只在3:5预览区域)
|
||||
initLongPressSave();
|
||||
@@ -1104,6 +1115,20 @@
|
||||
imageTools.classList.remove('active');
|
||||
bgTools.classList.remove('active');
|
||||
|
||||
// 移动端/编辑模式:固定在顶部始终可见
|
||||
if (window.innerWidth <= 768 || 'ontouchstart' in window) {
|
||||
editorToolbar.classList.add('editing-mode');
|
||||
// 滚动使工具栏和编辑元素可见
|
||||
setTimeout(() => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const toolbarHeight = editorToolbar.offsetHeight || 50;
|
||||
// 如果文本被工具栏遮挡,滚动页面
|
||||
if (rect.top < toolbarHeight + 10) {
|
||||
window.scrollBy({ top: rect.top - toolbarHeight - 20, behavior: 'smooth' });
|
||||
}
|
||||
}, 300); // 等待键盘弹出
|
||||
}
|
||||
|
||||
// 更新工具栏状态
|
||||
updateToolbarState(element);
|
||||
|
||||
@@ -1134,6 +1159,9 @@
|
||||
element.classList.add('selected');
|
||||
element.contentEditable = 'false';
|
||||
|
||||
// 移除移动端编辑模式样式
|
||||
editorToolbar.classList.remove('editing-mode');
|
||||
|
||||
// 检查是否需要显示 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')))
|
||||
|
||||
Reference in New Issue
Block a user