本文介绍在时间输入场景中，使右对齐（text-align: right）的 元素支持从光标左侧按 delete 键逐位删除末尾字符的两种主流方案：纯 css 的 dir="rtl" 方案与更可控的 javascript 事件拦截方案，并对比其优劣与适用边界。
在构建紧凑型时间输入组件（如 HH:MM）时，常将小时输入框设为 text-align: right，使其数字紧贴冒号显示，视觉上更符合习惯。但由此带来一个交互矛盾：光标默认停在左侧（用户直觉位置），此时按 Delete 键无法触发删除——因为标准行为要求光标位于待删字符右侧。
✅ 方案一：CSS dir="rtl"（简洁但有隐含限制）
只需为小时输入框添加 dir="rtl" 属性：
该属性会反转文本渲染方向与光标逻辑：
- 文本仍视觉右对齐（与 text-align: right 效果一致）；
- 光标从左端开始插入，Delete 键从右向左删除（即先删个位、再删十位），完美匹配“删除最低位数字”的需求；
- 无需 JS，零性能开销，语义清晰。
⚠️ 注意事项：
- dir="rtl" 会影响所有方向相关行为（如 Tab 键焦点顺序、部分屏幕阅读器播报逻辑）；
- 若输入框需支持双向文本（如混入阿拉伯数字+拉丁字母），可能引发不可预期的排版；
- 在极少数旧版浏览器中兼容性略弱（但现代浏览器全覆盖）。
✅ 方案二：JavaScript 拦截 Delete 键（精准可控）
当需要保留 ltr 文本方向或需扩展逻辑（如自动补零、格式校验）时，推荐监听 keydown 事件并手动处理：
document.getElementById('hours').addEventListener('keydown', function (e) {
if (e.key === 'Delete' || e.key === 'Backspace') {
e.preventDefault();
// 始终删除最右侧字符（模拟 RTL 删除逻辑）
this.value = this.value.slice(0, -1);
}
});✅ 优势：
- 完全保持 ltr 文本流，无方向副作用；
- 可轻松扩展：例如 if (this.value.length === 1) this.value = '0'; 实现补零；
- 支持统一处理 Backspace（左删）与 Delete（右删）逻辑，提升一致性。
⚠️ 注意事项：
- 需额外绑定事件，注意内存泄漏（尤其动态创建输入框时）；
- 不处理鼠标右键粘贴、拖拽覆盖等非键盘编辑场景（如需全面控制，应结合 input 事件做值规范化）；
- 移动端软键盘的 Delete 行为可能因系统差异略有不同，建议真机测试。
? 总结建议
- 优先尝试 dir="rtl"：对于纯数字时间输入，这是最轻量、最符合标准的解法，代码零侵入，效果直接可靠；
- 选用 JS 方案当且仅当：需严格保持 ltr 上下文、需定制化编辑逻辑（如自动补零/格式化）、或项目已存在统一的输入管控层；
- 避免混合使用：不要同时设置 text-align: right + dir="rtl" + JS 拦截，易导致行为冲突。
最终选择应基于可维护性与场景复杂度权衡——简单场景用 CSS，复杂交互用 JS，二者皆服务于“让用户感觉删除操作自然、符合直觉”这一核心目标。
