在 svelte 中，对 `` 进行实时格式化（如自动移除非法字符）时，需结合双向绑定与手动解析逻辑，避免因值未变更导致视图不更新的问题。关键在于使用 `bind:value` 同步状态，并在 `on:input` 中主动净化数据。
要在 Svelte 中实现「边输入边格式化」的文本输入框（例如自动过滤方括号 []、& 等非法字符），核心挑战在于：仅监听 on:input 并修改变量，无法触发输入框自身的值更新——因为 Svelte 的响应式赋值若未产生实际变化（如 parsed = parse('[hello]') 多次执行后仍为 'hello'），DOM 就不会重绘，光标也会错乱。
✅ 正确解法是：同时使用 bind:value 建立双向绑定 + 在 on:input 中主动净化 value。bind:value 确保输入框与变量始终同步，而 on:input 提供干预时机，在用户每次输入后立即修正内容。
以下是推荐实现：
<script>
let value = "[hello]";
// 格式化函数：移除所有 [ ] & 字符
const format = (str) => str.replace(/[\[\]&]/g, '');
// 初始化时即格式化
$value = format($value);
function handleInput() {
// 每次输入后，强制重新格式化当前值
value = format(value);
}
</script>
<h1>当前值：{value}</h1>
<input
type="text"
bind:value
on:input={handleInput}
placeholder="输入试试（[]& 会被自动移除）"
/>? 关键点说明：
- bind:value 是必须的——它让输入框与 value 变量双向同步，保证 DOM 更新和光标位置稳定；
- on:input 中调用 value = format(value) 是净化动作，确保每次输入后都应用规则；
- 不要仅依赖 on:input + 手动 event.target.value 赋值，否则会破坏绑定，导致响应式失效或光标跳变；
- 若需更精细控制（如保留光标位置、支持撤销/粘贴过滤），可结合 event.target.selectionStart/End 缓存并恢复光标，但对大多数场景，上述方案已足够健壮。
? 进阶提示：如需支持粘贴（on:paste）或回车提交等场景，可额外监听对应事件并复用 format() 函数，保持逻辑统一。
