如何优化右对齐小时输入框的Delete键删除交互？

我需要实现一个模拟单输入框样式的并排时间输入组件，初始代码如下：

#wrapper {
  display: flex;
  width: 150px;
  border: 1px solid red;
}

input {
  min-width: 0;
  border: none;
}

input:focus {
  outline: none;
}

#hours {
  text-align: right;
}

<div id="wrapper">
  <input type="text" id="hours" maxlength=2>
  <div id="colon"><span>:</span></div>
  <input type="text" id="minutes" maxlength=2>
</div>

为了让小时输入框的内容靠近冒号，我给它设置了text-align: right，但编辑时遇到问题：光标在左侧按Delete键无法删除低位数字（比如输入值为12时，想优先删除2）。目前通过给hours输入框添加dir="rtl"属性解决了这个问题，但想知道有没有更优的实现方案。

更优方案：用JavaScript控制交互逻辑 #

使用dir="rtl"虽然能解决删除问题，但可能会让用户产生输入方向的混淆（比如输入字符时的顺序感知不符合常规从左到右的习惯）。推荐通过JavaScript精准控制光标位置和Delete键行为，既保留视觉上的右对齐效果，又符合常规输入交互逻辑。

完整实现代码如下：

CSS（保持视觉右对齐）

#wrapper {
  display: flex;
  width: 150px;
  border: 1px solid red;
}

input {
  min-width: 0;
  border: none;
}

input:focus {
  outline: none;
}

#hours {
  text-align: right; /* 保留视觉右对齐，让内容靠近冒号 */
}

HTML（移除dir属性）

<div id="wrapper">
  <input type="text" id="hours" maxlength="2">
  <div id="colon"><span>:</span></div>
  <input type="text" id="minutes" maxlength="2">
</div>

JavaScript（控制光标与删除行为）

const hoursInput = document.getElementById('hours');

// 聚焦时自动将光标移到内容末尾
hoursInput.addEventListener('focus', () => {
  const contentLength = hoursInput.value.length;
  hoursInput.setSelectionRange(contentLength, contentLength);
});

// 输入内容后，光标保持在末尾
hoursInput.addEventListener('input', () => {
  const contentLength = hoursInput.value.length;
  hoursInput.setSelectionRange(contentLength, contentLength);
});

// 处理Delete键：优先删除低位数字（最后一位）
hoursInput.addEventListener('keydown', (e) => {
  if (e.key === 'Delete') {
    e.preventDefault();
    const currentValue = hoursInput.value;
    // 删除最后一位字符
    hoursInput.value = currentValue.slice(0, -1);
    // 更新光标位置到新内容的末尾
    const newLength = hoursInput.value.length;
    hoursInput.setSelectionRange(newLength, newLength);
  }
});

方案优势 #

1. 避免交互混淆：无需依赖dir="rtl"，用户输入时遵循常规从左到右的逻辑，不会产生方向困惑
2. 精准控制行为：Delete键始终删除低位数字，完全符合预期交互
3. 视觉效果不变：保持小时输入框内容右对齐，靠近冒号的视觉样式
4. 更好的兼容性：不会因dir属性带来的其他潜在布局或输入问题

内容的提问来源于stack exchange，提问作者pileup