解决浏览器撤销重做操作导致光标跳跃问题

问题分析

在多输入框表单中，当用户使用浏览器的撤销(Ctrl+Z)或重做(Ctrl+Y)操作时，可能会遇到以下问题： 1. 光标意外跳转到其他输入框 2. 内容被错误地修改 3. 用户体验被打断

这是因为浏览器默认将撤销/重做操作应用于整个文档，而不仅仅是当前聚焦的输入框。

解决方案

1. 监听键盘事件并阻止默认行为

document.addEventListener('keydown', function(event) {
    // 检测Ctrl+Z (撤销) 或 Ctrl+Y (重做)
    if ((event.ctrlKey || event.metaKey) && 
        (event.key === 'z' || event.key === 'y' || event.key === 'Z' || event.key === 'Y')) {

        // 检查是否有输入框处于焦点状态
        const activeElement = document.activeElement;
        if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
            event.preventDefault();
            // 在这里实现自定义的撤销/重做逻辑
            handleCustomUndoRedo(activeElement, event.key.toLowerCase());
        }
    }
});

function handleCustomUndoRedo(element, key) {
    // 实现针对当前输入框的撤销/重做逻辑
    if (key === 'z') {
        // 自定义撤销逻辑
        console.log('Custom undo for', element.id);
    } else if (key === 'y') {
        // 自定义重做逻辑
        console.log('Custom redo for', element.id);
    }
}

2. 使用contenteditable替代输入框

对于复杂场景，可以考虑使用contenteditable div代替输入框，这样可以更好地控制撤销/重做行为：

<div contenteditable="true" class="custom-input" data-id="input1"></div>
<div contenteditable="true" class="custom-input" data-id="input2"></div>

<script>
document.querySelectorAll('.custom-input').forEach(input => {
    input.addEventListener('keydown', function(event) {
        if ((event.ctrlKey || event.metaKey) && 
            (event.key === 'z' || event.key === 'y')) {
            event.preventDefault();
            handleCustomUndoRedo(this, event.key.toLowerCase());
        }
    });
});
</script>

3. 使用第三方库

考虑使用专门的库来管理撤销/重做堆栈： - UndoManager - Tiptap (适用于富文本编辑器)

4. 为每个输入框维护独立的状态历史

const inputHistories = {};

document.querySelectorAll('input, textarea').forEach(input => {
    inputHistories[input.id] = {
        undoStack: [],
        redoStack: [],
        currentValue: input.value
    };

    input.addEventListener('input', function() {
        const history = inputHistories[this.id];
        history.undoStack.push(history.currentValue);
        history.currentValue = this.value;
        history.redoStack = []; // 清空重做栈
    });
});

function handleCustomUndoRedo(element, key) {
    const history = inputHistories[element.id];
    if (!history) return;

    if (key === 'z' && history.undoStack.length > 0) {
        // 撤销
        history.redoStack.push(history.currentValue);
        history.currentValue = history.undoStack.pop();
        element.value = history.currentValue;
    } else if (key === 'y' && history.redoStack.length > 0) {
        // 重做
        history.undoStack.push(history.currentValue);
        history.currentValue = history.redoStack.pop();
        element.value = history.currentValue;
    }
}

最佳实践建议

1. 明确反馈：当用户执行自定义撤销/重做时，提供视觉反馈
2. 限制历史深度：避免内存问题，限制每个输入框的历史记录数量
3. 移动端兼容：考虑移动设备上的手势撤销操作
4. 测试覆盖：确保在各种浏览器和设备上测试解决方案

通过以上方法，您可以有效控制多输入框环境下的撤销/重做行为，避免光标跳跃问题，提供更流畅的用户体验。