使用bind:value绑定函数时，如何将输入框光标移至末尾？

问题场景 #

使用bind:value结合格式化函数处理输入内容时，因格式化后字符串长度变化，光标会停留在字符中间而非末尾，且要求仅在父组件中修复，不改动可复用的子组件代码。

解决方案代码 #

父组件代码

<script>
    import InputComponent from "./InputComponent.svelte"
    let id = $state('')

    function formatId(value) {
        value = value.replace(/\D/g, '');
        if (value.length < 2) return value;

        const idWithoutDash = value.slice(0, -1);
        const verifier = value.slice(-1);

        const formatted = idWithoutDash.replace(/\B(?=(\d{2})+(?!\d))/g, '.');
        return `${formatted}-${verifier}`;
    }

    function handleInput(e) {
        const formattedValue = formatId(e.target.value);
        id = formattedValue;
        
        // 等待DOM更新后将光标定位到末尾
        requestAnimationFrame(() => {
            e.target.setSelectionRange(formattedValue.length, formattedValue.length);
        });
    }
</script>

<InputComponent bind:value={id} on:input={handleInput}></InputComponent>
<p>
    {id}
</p>

子组件代码（无需修改）

<script>
    let { value = $bindable() } = $props();
</script>

<input bind:value={value} />

核心逻辑说明 #

• 监听子组件触发的input事件，通过事件对象e.target直接获取输入框DOM元素，无需修改子组件暴露引用
• 格式化输入值后，使用requestAnimationFrame确保DOM更新完成后再调整光标位置，避免操作时机过早失效
• 调用setSelectionRange将光标直接定位到格式化后字符串的末尾，解决光标错位问题

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