ui-mask退格键清空输入框问题：如何阻止起始位置全删行为？

我太懂你这种糟心的情况了——用ui-mask做的CNIC输入框，正常输入流程都没问题，可一旦在输入框起始位置按下退格键，整个内容直接被清空，连官方演示都存在这个bug，真的很影响用户体验！别担心，给你几个实用的解决办法：

方法1：自定义指令拦截退格键事件（最推荐） #

我们可以写一个AngularJS自定义指令，专门监听输入框的退格键事件，当光标处于输入框起始位置时，阻止它的默认清空行为。

先创建这个指令：

angular.module('你的应用模块名').directive('preventFullClearOnBackspace', function() {
  return {
    link: function(scope, element) {
      element.on('keydown', function(e) {
        // 检查是否是退格键，且光标完全在输入框起始位置
        if (e.keyCode === 8 && element[0].selectionStart === 0 && element[0].selectionEnd === 0) {
          e.preventDefault(); // 阻止默认的全清空行为
        }
      });
    }
  };
});

然后把这个指令添加到你的CNIC输入框上：

<input type="text" id="txtCNIC" ui-mask="99999-9999999-9" name="txtCNIC" prevent-full-clear-on-backspace>

这个方法的好处是针对性强，只会影响加了指令的输入框，不会干扰其他ui-mask组件的正常功能，而且兼容性也不错。

方法2：调整ui-mask源码（不推荐，仅特殊场景用） #

如果你的项目允许修改ui-mask的源码，可以找到它处理退格键的逻辑部分，修改成“当光标在起始位置时，不执行全清空操作”。不过这种方式风险较高，后续更新ui-mask版本时，你的修改会被覆盖，除非你打算长期维护自定义版本的ui-mask。

方法3：监听输入事件恢复内容（备选方案） #

如果上面的方法都不适用，还可以通过监听输入框的input事件，记录输入框的历史内容，当检测到退格后内容被清空时，恢复之前的部分内容。不过这种方式需要额外维护状态，逻辑相对复杂一些，不如第一种方法直接。

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