输入模板 · 技术验证
编辑左侧文本,观察事件与处理结果。标题、作者各一行,字段之间恰好一个空行,正文支持多行。
格式合法 · 等待输入
字段值允许为空。空行不能含空格或制表符。在「内容:」右侧输入的文字会自动移到下一行。
| # / 事件 | inputType / data | 组合 / 可取消 | 处理结果 |
|---|
最新事件在上,最多保留 80 条。data 使用 JSON 表示,换行显示为 \n;长文本截断显示。日志不改变编辑焦点。
实现思路
beforeinput:构造候选文本 → 正文换行规范化 → 校验。可可靠预测且可取消的非法编辑提前阻止。input:检查实际文本。无法提前拦截的非法编辑,恢复最近合法文本及编辑前选区。compositionstart / compositionend:组合输入期间暂不校验;提交后统一处理,避免打断中文选词。- 粘贴统一换行符;自动修正与恢复通过脚本更新文本和光标。原生撤销历史的表现可能受浏览器影响,可结合日志观察。
折叠光标的删除、拖放、撤销重做等操作交由浏览器执行,再用 input 校验,避免猜测浏览器的删除范围。组合结束延迟到当前事件序列完成后处理,兼容尾随的 input 事件。
手动验证清单
- 在标题、作者后输入中文;在正文连续换行,插入空行。
- 在「内容:」右侧输入或粘贴文字,观察自动换行后的文本和光标。
- 删除标签、增加或删除分隔空行、在分隔空行输入空格,观察拒绝原因。
- 跨字段选区替换、粘贴完整模板、全选删除,观察提前阻止或输入后恢复。
- 使用中文输入法选词或取消组合,尝试剪切、拖放、撤销和重做,观察事件顺序。