通过 javascript 拦截 delete 键事件并手动截取字符串末尾字符，可在保持文本右对齐视觉效果的同时，支持光标位于左侧时仍按“删右端数字”逻辑删除（如 "12" → 按一次 delete 变为 "1"）。
在时间输入控件中，为使数字紧贴冒号（如 12:30），常将小时输入框设为 text-align: right。但此时浏览器默认的 Delete 行为仅在光标位于待删字符左侧时生效——而右对齐下用户习惯将光标置于左侧，导致按 Delete 无响应，体验割裂。
虽然 dir="rtl"（右向左书写方向）能间接实现目标行为（因 RTL 下 Delete 默认删除光标右侧字符，结合右对齐后逻辑等效于删末位），但它会改变整个输入框的文本渲染逻辑（如影响数字顺序、光标移动、选中行为，且与 LTR 页面语境冲突），并非健壮方案。
更推荐使用轻量级 JavaScript 增强：监听 keydown 事件，捕获 Delete 键，阻止默认行为，并主动移除字符串最后一个字符：
document.getElementById('hours').addEventListener('keydown', function (event) {
if (event.key === 'Delete') {
event.preventDefault();
this.value = this.value.slice(0, -1);
}
});✅ 优势明显：
- 语义清晰：明确表达“Delete = 删除末位数字”，符合时间输入直觉；
- 兼容性强：不依赖书写方向，适配所有 LTR 页面及国际化场景；
- 精准可控：可轻松扩展（如限制 maxlength、过滤非数字、自动补零等）；
- 不影响光标/选中：用户仍可自由点击定位、双击选中、配合 Ctrl+A 全选等。
⚠️ 注意事项：
- 此方案仅处理 Delete 键；若需同时支持 Backspace（从左删）并保持“删末位”一致性，需额外判断光标位置或统一按 value.slice(0, -1) 处理（需权衡用户预期）；
- 对粘贴（paste）事件建议补充监听，确保输入值始终符合 maxlength=2 及数字格式；
- 若需更高阶交互（如自动跳转、格式化分隔符），建议封装为自定义时间输入组件。
综上，用 event.preventDefault() + slice(0, -1) 是兼顾简洁性、可维护性与用户体验的最佳实践。
