AngularJS：如何将输入框光标定位到特定值@gmail.com之前？

首先看你当前的代码，点击输入框会把值设为@gmail.com，但光标默认停在末尾，要把光标移到@前面，我们需要在设置完值后手动控制光标位置，下面是具体的实现方案：

核心思路 #

1. 先为输入框设置目标值@gmail.com
2. 确保DOM更新完成后，获取输入框的DOM元素
3. 使用setSelectionRange方法将光标定位到@的前方（也就是字符串的起始位置，索引0处）

修改后的代码示例 #

HTML部分

<input type="email" name="email" id="email" ng-model="vals" ng-click="setEmailAndCursor()">

这里把value="{{vals}}"替换成ng-model="vals"更符合AngularJS的数据绑定规范，能更顺畅地同步视图和数据。

AngularJS控制器部分

// 记得在控制器里注入$timeout服务
app.controller('YourController', ['$scope', '$timeout', function($scope, $timeout) {
  $scope.setEmailAndCursor = function() {
    // 设置输入框的值
    $scope.vals = "@gmail.com";
    
    // AngularJS的数据绑定是异步的，用$timeout确保DOM已更新再操作光标
    $timeout(function() {
      const emailInput = document.getElementById('email');
      // 将光标定位到索引0的位置（@的前方）
      emailInput.setSelectionRange(0, 0);
      // 确保输入框获得焦点，让光标正常显示
      emailInput.focus();
    });
  };
}]);

为什么要用$timeout？ #

AngularJS的$digest更新周期是异步的，当你修改$scope.vals后，DOM不会立刻同步更新。如果直接去设置光标，可能会拿到旧的DOM状态，用$timeout可以确保我们在DOM完全更新后再执行光标定位操作。

进阶方案：自定义指令（复用性更强） #

如果这个功能需要在多个地方使用，更推荐用AngularJS的指令来封装：

app.directive('emailCursorHandler', ['$timeout', function($timeout) {
  return {
    link: function(scope, element) {
      element.on('click', function() {
        scope.vals = "@gmail.com";
        $timeout(function() {
          // 操作DOM元素，设置光标位置
          element[0].setSelectionRange(0, 0);
          element[0].focus();
        });
        // 原生事件中修改scope后，手动触发digest周期同步视图
        scope.$apply();
      });
    }
  };
}]);

然后在HTML中直接使用指令即可：

<input type="email" name="email" id="email" ng-model="vals" email-cursor-handler>

这样就能完美实现点击输入框后，值设为@gmail.com且光标自动定位到@前面的需求啦！

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