fix(mobile): 优化触摸编辑和键盘触发逻辑

This commit is contained in:
2026-04-21 09:30:31 +08:00
parent bc37358027
commit 6506988f33

View File

@@ -1057,26 +1057,18 @@
// 移动端:触摸结束后进入编辑(更灵敏) // 移动端:触摸结束后进入编辑(更灵敏)
let lastTapTime = 0; let lastTapTime = 0;
let touchEditTriggered = false;
element.addEventListener('touchend', (e) => { element.addEventListener('touchend', (e) => {
// 如果正在拖拽,不触发编辑 // 如果正在拖拽,不触发编辑
if (isDragging) return; if (isDragging) return;
// 防止 touchend 后立即触发 click 导致重复进入编辑
e.preventDefault();
e.stopPropagation();
const currentTime = Date.now(); const currentTime = Date.now();
// 双击检测(300ms内两次点击) // 双击检测(300ms内两次点击)
if (currentTime - lastTapTime < 300) { if (currentTime - lastTapTime < 300) {
// 双击已在 click 事件中处理,这里不重复 // 双击已在 click 事件中处理,这里不重复
touchEditTriggered = true;
} else { } else {
// 单击延迟处理,避免与拖拽冲突 // 单击延迟处理,避免与拖拽冲突
touchEditTriggered = false;
setTimeout(() => { setTimeout(() => {
if (!isDragging && !touchEditTriggered && editingInput !== element) { if (!isDragging && editingInput !== element) {
touchEditTriggered = true;
selectInput(element); selectInput(element);
startEdit(element); startEdit(element);
} }
@@ -1137,6 +1129,9 @@
// 更新工具栏状态 // 更新工具栏状态
updateToolbarState(element); updateToolbarState(element);
// 立即 focus 以触发键盘(必须在用户交互的同步上下文中)
element.focus();
// 如果没有选中文本,则定位光标到末尾 // 如果没有选中文本,则定位光标到末尾
setTimeout(() => { setTimeout(() => {
const sel = window.getSelection(); const sel = window.getSelection();
@@ -1147,29 +1142,9 @@
sel.removeAllRanges(); sel.removeAllRanges();
sel.addRange(range); sel.addRange(range);
} }
element.focus(); }, 0);
// 尝试多种方式触发键盘弹出
// 方式1: 标准 focus
element.focus();
// 方式2: 对于 iOS,需要创建一个临时的 input 来触发键盘
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
const tempInput = document.createElement('input');
tempInput.style.position = 'fixed';
tempInput.style.opacity = '0';
tempInput.style.top = '-1000px';
document.body.appendChild(tempInput);
tempInput.focus();
setTimeout(() => {
tempInput.blur();
tempInput.remove();
element.focus();
}, 100);
}
}, 10);
// 方式3: 使用 Virtual Keyboard API(如果支持) // 使用 Virtual Keyboard API(如果支持)
if ('virtualKeyboard' in navigator) { if ('virtualKeyboard' in navigator) {
navigator.virtualKeyboard.show(); navigator.virtualKeyboard.show();
} }