如何规避虚拟键盘建议文本的多余空格且保留建议功能？

问题根源分析 #

你遇到的核心问题在于：

1. 用input事件时，全量清空再赋值的操作打断了虚拟键盘对DOM内容的追踪，导致丢失建议功能
2. 用keyup事件时，重复设置原内容的操作（val2 + sub等于原文本）叠加了键盘已输入的内容，直接造成重复字符串；同时未针对性处理虚拟键盘自动添加的多余空格

解决方案 #

改用input事件，避免全量替换DOM内容，仅针对性处理多余空格，同时精准维护光标位置，确保虚拟键盘能持续追踪内容生成建议。以下是修改后的实现：

HTML（保持不变）

<html>
<style>
#sp {
    outline: none;
    white-space: pre-wrap;
    position: relative;
    font-family: monospace;
    background: #f3f3f3;
}
</style>
<span contentEditable=true id="sp">continue...</span>
</html>

修改后的JavaScript

const outspanin = document.getElementById('sp');

outspanin.addEventListener('input', function(e) {
    let content = outspanin.textContent;
    const selection = window.getSelection();
    const caretPos = selection.anchorOffset;

    // 处理规则：去除末尾多余空格（可根据需求调整正则，比如合并连续空格）
    const processedContent = content.replace(/\s+$/, '');

    // 仅在内容有变化时执行修改，避免不必要的DOM操作
    if (processedContent !== content) {
        // 计算光标位置偏移：避免修改内容后光标错位
        let newCaretPos = caretPos;
        const removedLength = content.length - processedContent.length;
        
        // 若光标在被删除的空格区域，将光标移到文本末尾
        if (caretPos > processedContent.length) {
            newCaretPos = processedContent.length;
        } else {
            // 计算光标前的内容处理后的长度，保持光标相对位置
            const beforeCaret = content.slice(0, caretPos);
            const processedBefore = beforeCaret.replace(/\s+$/, '');
            newCaretPos = processedBefore.length;
        }

        // 直接修改文本内容，不清空DOM，保留内容连续性
        outspanin.textContent = processedContent;

        // 恢复光标位置
        setCaretPosition(newCaretPos);
    }
});

function setCaretPosition(pos) {
    const range = document.createRange();
    const sel = window.getSelection();
    
    // 处理元素为空的边界情况
    if (outspanin.childNodes.length === 0) {
        outspanin.appendChild(document.createTextNode(''));
    }
    
    const textNode = outspanin.childNodes[0];
    // 限制光标位置在合法范围内
    pos = Math.max(0, Math.min(pos, textNode.length));
    
    range.setStart(textNode, pos);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
}

关键优化点 #

1. 保留DOM连续性：直接修改文本内容而非清空重写，让虚拟键盘能持续追踪内容生成建议
2. 精准处理空格：通过正则针对性去除多余空格（示例为末尾空格，可根据需求调整为合并连续空格等规则）
3. 光标位置维护：计算内容修改前后的光标偏移，避免光标错位影响输入体验
4. 避免重复操作：仅在内容确实变化时执行修改，减少不必要的DOM交互

额外建议 #

• 如果是输入法或虚拟键盘在选择建议后自动添加空格，可搭配compositionend事件（针对输入法输入完成的场景），进一步精准处理空格问题
• 测试不同平台的虚拟键盘（iOS/Android系统键盘、第三方输入法），确保兼容性

内容的提问来源于stack exchange，提问作者Abednego Nasila