在 svelte 中，对 `` 进行实时格式化（如自动移除非法字符）时，需结合双向绑定与手动解析逻辑，避免因值未变更导致视图不更新的问题。关键在于使用 `bind:value` 同步状态，并在 `on:input` 中主动净化数据。

要在 Svelte 中实现「边输入边格式化」的文本输入框（例如自动过滤方括号 []、& 等非法字符），核心挑战在于：仅监听 on:input 并修改变量，无法触发输入框自身的值更新——因为 Svelte 的响应式赋值若未产生实际变化（如 parsed = parse(‘[hello]’) 多次执行后仍为 ‘hello’），dom 就不会重绘，光标也会错乱。

✅ 正确解法是：同时使用 bind:value 建立双向绑定 + 在 on:input 中主动净化 value。bind:value 确保输入框与变量始终同步，而 on:input 提供干预时机，在用户每次输入后立即修正内容。

以下是推荐实现：

  
当前值：{value}
 

? 关键点说明：

• bind:value 是必须的——它让输入框与 value 变量双向同步，保证 DOM 更新和光标位置稳定；
• on:input 中调用 value = format(value) 是净化动作，确保每次输入后都应用规则；
• 不要仅依赖 on:input + 手动 Event.target.value 赋值，否则会破坏绑定，导致响应式失效或光标跳变；
• 若需更精细控制（如保留光标位置、支持撤销/粘贴过滤），可结合 event.target.selectionStart/End 缓存并恢复光标，但对大多数场景，上述方案已足够健壮。

? 进阶提示：如需支持粘贴（on:paste）或回车提交等场景，可额外监听对应事件并复用 format() 函数，保持逻辑统一。