如何通过按键操作将光标定位到指定Angular输入字段？

要实现按下特定按键时将光标定位到目标输入框，你可以按照以下步骤操作，基于AngularJS的特性来完成：

步骤1：给目标输入框添加标识 #

首先给你的输入框加上一个id，这样我们能在控制器中精准获取到这个元素：

<div class="contentView" ng-keypress="phs.keyEnter($event)"></div>

<!-- 添加id="englishInput"便于元素获取 -->
<input 
  id="englishInput"
  ng-change="phs.englishChange();" 
  ng-model="phs.english" 
  ng-model-options="{ debounce: 750 }" 
  style="width:6rem;" 
  type="text" 
/>

步骤2：修改keyEnter处理函数 #

在你的控制器中，更新keyEnter函数，判断触发的按键，然后聚焦到输入框，还可以可选地将光标定位到内容末尾：

phs.keyEnter = ($event) => {
  // 替换成你想要触发的按键，比如回车键是13，或者用$event.key === 'Enter'更直观
  const triggerKeyCode = 13;

  if ($event.keyCode === triggerKeyCode) {
    // 阻止按键的默认行为（比如回车键可能触发表单提交）
    $event.preventDefault();

    // 获取输入框元素
    const inputElement = document.getElementById('englishInput');
    if (inputElement) {
      // 聚焦到输入框
      inputElement.focus();

      // 可选：将光标移动到现有内容的末尾（如果不需要可以删除这段）
      const contentLength = inputElement.value.length;
      inputElement.setSelectionRange(contentLength, contentLength);
    }
  }
};

额外说明 #

• 按键判断兼容：如果需要更好的浏览器兼容性，可以用$event.key替代keyCode，比如判断$event.key === 'Enter'，这是更现代的按键识别方式。
• AngularJS风格的元素获取：如果你更倾向于用AngularJS内置的方式获取元素，可以替换成：

  const inputElement = angular.element(document.getElementById('englishInput'))[0];
  

• 阻止默认行为：一定要记得调用$event.preventDefault()，避免按键的默认动作干扰你的操作（比如页面刷新、表单提交等）。

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