Svelte格式化文本输入问题：输入特殊字符后输入框不更新

问题核心：当输入的字符被格式化函数移除后，格式化后的值与之前的parsed一致，Svelte因值未变化不会触发DOM更新，导致输入框仍显示被移除的字符。

解决方案：手动同步DOM并处理光标位置 #

无需使用key块，只需在输入事件中手动更新输入框DOM，并调整光标位置避免跳转：

<script>
    let parsed = parse("[hello]");
    const parse = (value) => value.replace(/[\[\]&]+/g, '');

    const handleInput = (e) => {
        const input = e.target;
        // 记录当前光标位置
        const cursorPosition = input.selectionStart;
        const originalValue = input.value;
        const formattedValue = parse(originalValue);

        // 计算被移除的字符数，用于调整光标位置
        const removedCount = originalValue.length - formattedValue.length;

        // 更新绑定的变量
        parsed = formattedValue;
        // 强制同步输入框DOM内容，即使值未变化
        input.value = formattedValue;
        // 恢复光标位置，避免因格式化跳转到末尾
        input.setSelectionRange(
            Math.max(0, cursorPosition - removedCount),
            Math.max(0, cursorPosition - removedCount)
        );
    };
</script>

<h1>{parsed}</h1>
<input type="text" value={parsed} on:input={handleInput} />

原理说明 #

1. 强制DOM同步：即使格式化后的值与原parsed相同，通过input.value = formattedValue手动更新输入框内容，确保显示与绑定值一致。
2. 光标位置处理：记录光标位置，计算被移除的字符数，调整光标到正确位置，避免用户输入时光标跳转到末尾，提升交互体验。

内容的提问来源于stack exchange，提问作者James Hammond