本文介绍在时间输入场景中，为右对齐文本框（如小时输入框）实现自然编辑体验的方法：既保持视觉右对齐、贴近分隔符（如冒号），又支持光标位于左侧时按 delete 键从末尾删除字符，无需依赖 `dir="rtl"`。
在构建紧凑型时间输入组件（如 HH:MM）时，常将小时输入框设置为 text-align: right，使其内容紧贴右侧的冒号，提升视觉一致性与可读性。但由此带来一个交互矛盾：当用户习惯性将光标置于数字最左侧（例如在 12 中光标停在 1 前）并按下 Delete 键时，原生行为不会触发任何删除——因为浏览器默认仅在光标右侧有字符时才执行删除操作。
虽然使用 dir="rtl" 可以间接达成目标（使光标默认落于右侧、逻辑方向反转），但它会带来副作用：影响文本渲染顺序、可能干扰数字输入的双向算法（尤其在混合语言环境）、破坏表单语义，并增加维护复杂度。更优雅、可控且符合标准的方案是通过轻量级 JavaScript 拦截并重定义 Delete 键行为。
核心思路是监听 keydown 事件，在检测到 event.key === 'Delete' 时：
- 阻止默认行为（event.preventDefault()）；
- 手动截取字符串末尾一位（value.slice(0, -1)），模拟“删除最低位数字”的预期逻辑。
以下是完整、健壮的实现示例：
:
✅ 关键优势说明：
- 行为精准可控：只干预 Delete，Backspace 仍按原生逻辑从光标左侧删除，兼顾不同编辑习惯；
- 无渲染副作用：不改变文本方向、不干扰 RTL/LTR 混排，语义清晰；
- 兼容性强：适用于所有现代浏览器，无需 CSS hack 或 polyfill；
- 可扩展：轻松复用至分钟、秒等其他右对齐数字输入框。
⚠️ 注意事项：
- 避免同时监听 keypress（已废弃）或 input 事件做删除逻辑，应优先使用 keydown 保证响应及时性；
- 若需支持粘贴（Paste）时自动格式化，建议额外监听 paste 事件并调用 event.preventDefault() 后手动解析；
- 在移动端需注意软键盘 Delete 键触发行为的一致性，本方案经实测在 iOS Safari 与 Chrome Android 上均稳定有效。
综上，相比 dir="rtl" 的“曲线救国”方式，JavaScript 方案更直接、可维护、语义正确，是构建专业级时间输入控件的推荐实践。
