DEBUG.WIKI
V.PS:让项目靠近用户,亚太、欧洲、北美 KVM VPS
IPPeak:从目标地区访问网页,住宅代理、SEO 监测、广告验证
ZgoCloud:多地区部署,按需选节点;日本、美国、香港、德国

Svelte 小数输入被清空

数字字段通过属性展开回写 value,输入未完成小数时被旧 Svelte 冗余赋值清空。核对 5.57.2 修复、浏览器地区与表单边界。

数字输入框输入到小数点时,刚打出的内容突然全部消失。若输入来自 Svelte 的属性展开,例如远程表单的数字字段,应检查框架是否把一个没有变化的空值重新写回了 DOM。

Svelte 5.57.1 存在相应的 spread value 路径问题,正式版 5.57.2 修正了冗余写入。这里涉及输入尚未完成的中间状态,不是把所有小数解析错误都当成同一个框架缺陷。

屏幕上的文字与 input.value 可以不同

数字输入框还在编辑时,浏览器可能显示 250.,而脚本读取到的 input.value 已经是空字符串,validity.badInput 为真。用户尚未完成小数,并不等于他主动把字段清空了。

表单层读取空值、转换成自己的空状态后,再经属性展开传回 value: ''。旧实现即使发现 DOM 的 value 已经是空字符串,也会再次执行赋值。这个赋值会把浏览器仍显示的未完成文本一起清掉。

因此,排查要同时看用户可见文字、DOM value、有效性状态和表单层的返回值。只在日志中看见空字符串,无法判断是用户删除了内容,还是数字输入处于未完成状态。

检查 value 是否通过 spread 写回

一种具体接线是:

<input {...myRemote.fields.quantity.as('number')} />

这里的 myRemote 应由应用原来的远程表单流程提供,这一行不是独立的新表单程序。需要检查展开的字段是否包括 type 和 value,以及输入事件怎样把浏览器空值映射回字段状态。

直接声明 value={...} 与通过 spread 更新 value 的旧实现并不完全相同。普通 <input type="number"> 也不会因为这个框架回写路径而清空。做对照时应保留同一个表单行为,逐步确定是哪条写入路径触发问题。

最初可观察到的条件包含 Safari 的法语瑞士地区设置 fr-CH;这不代表问题只属于这个地区。Chromium 中未完成的 250. 也会遇到相关状态,Safari 的小数分隔符约定则会影响哪些输入被视为不完整。

升级后避免没有必要的重复赋值

Svelte 5.57.2 的 spread 处理对比 DOM 当前值,后续 value 没有变化时避免重复写入。首次设置仍会执行,以保留输入框的 dirty value 行为,避免之后的 defaultValue 意外改变当前值。

选择兼容版本并重新生成实际客户端资源,再保留原表单流程验收。不要为了让小数点留下来,给字段一律覆盖 value="":这种做法可能压掉已有数据、编辑初值或表单的受控回写。

如果应用自己的处理函数仍不断重写 value,或每次按键都重建输入节点,也要继续处理这些应用行为。框架避免自己的冗余赋值,不会替其他代码保留用户的编辑状态。

分别验收编辑与提交

在实际使用的浏览器和地区设置下,输入完整小数,也保留输入到分隔符尚未完成的状态,确认文本不被无意义清除。随后检查初值、清空、重置和外部更新仍符合表单约定。

允许保留中间输入,不代表允许提交不合法数字。提交时仍按字段契约验证空值、范围和数字格式,不能为了修复编辑体验而关闭业务校验或硬把所有分隔符转换成同一个字符。