fix(mobile): 优化触摸编辑和键盘触发逻辑
This commit is contained in:
37
js/script.js
37
js/script.js
@@ -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();
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user