AngularJS中angular-input-mask实现从右往左填充且小时可选3位的时间掩码问题求助

我之前在项目里也遇到过angular-ui-mask处理这种动态小时位时间掩码的问题，折腾了好一阵才找到靠谱的解决方案，分享给你：

核心问题分析 #

你用dir="rtl"和文本方向样式的思路其实走偏了——全局反转文本方向会直接打乱浏览器原生的按键逻辑（退格、删除键异常就是这么来的），而且也没法精准控制掩码的填充规则。我们真正需要的是掩码从右往左填充，而不是整个输入框的文本方向反转。

解决方案步骤 #

1. 移除RTL相关配置

先删掉输入框上的dir="rtl"和style="unicode-bidi:bidi-override; direction: RTL;"，这些是导致按键异常、输入顺序混乱的根源。

2. 调整掩码配置并启用反向填充

用ui-mask的原生反向填充功能，配合可选位配置，就能实现你要的效果：

<input 
  class="form-control dynamic-input" 
  ui-mask="?99:99" 
  ng-model="$ctrl.ngModel" 
  ui-mask-reverse="true"
  ui-mask-placeholder="   :  "
  ui-mask-placeholder-char=" "
/>

• ?99:99：定义小时部分可以是2位（忽略首位的?占位符）或3位（填满所有数字位），分钟固定为2位，完美匹配000:00或00:00的格式需求。
• ui-mask-reverse="true"：让输入的数字从掩码最右侧开始填充——先填分钟的两位，再填小时的后两位，最后填小时的首位，完全符合你要的从右往左填充逻辑。
• 占位符设置为" : "：初始显示为三个空格+冒号+两个空格，输入时会逐步替换空格为数字，视觉上更友好。

3. 处理模型值与显示值的转换

为了让模型值自动去掉小时前的空格（比如显示 23:17时，模型值存为23:17），可以通过ngModel的管道来处理：

// 在你的组件控制器中添加逻辑
angular.module('yourApp').controller('YourController', function() {
  const ctrl = this;

  ctrl.$onInit = function() {
    // 假设你通过组件绑定获取到了ngModel控制器
    const ngModel = ctrl.ngModel;

    // 格式化器：模型值转显示值（补空格对齐3位小时）
    ngModel.$formatters.push(function(value) {
      if (!value) return '';
      const [hours, minutes] = value.split(':');
      return hours.length === 2 ? ` ${hours}:${minutes}` : value;
    });

    // 解析器：显示值转模型值（去掉空格，保留标准格式）
    ngModel.$parsers.push(function(value) {
      if (!value) return '';
      return value.trim().replace(/^(\d{2,3}):(\d{2})$/, '$1:$2');
    });
  };
});

测试验证 #

• 输入25 → 显示 :25
• 输入1723 → 显示 23:17，模型值为23:17
• 输入25127 → 显示127:25，模型值为127:25
• 退格/删除键完全恢复正常，和原生输入框逻辑一致

这样就能完美实现你要的时间掩码效果，同时解决了之前的所有问题。

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