如何用JavaScript让输入框光标定位在文本末尾（无事件对象）

核心实现思路 #

1. 定位目标输入容器/输入框
2. 抓取最新生成的tc-tag-*元素（利用编号递增特性，取同类型元素的最后一个）
3. 将选中标签的文本填充到输入框
4. 通过DOM Selection API手动将光标定位到文本末尾

具体代码实现 #

// 1. 获取输入容器（假设是可编辑容器或包含input的父容器）
const inputContainer = document.getElementById('tags-container');

// 2. 获取最新的动态生成标签
// 方式一：若所有动态标签共享`tc-tag`类名
const tagElements = inputContainer.querySelectorAll('.tc-tag');
const latestSelectedTag = tagElements[tagElements.length - 1];

// 方式二：若标签ID以`tc-tag-`为前缀（兼容无统一类名的场景）
// const allElements = document.getElementsByTagName('*');
// let latestSelectedTag;
// for (const elem of allElements) {
//   if (elem.id.startsWith('tc-tag-')) {
//     latestSelectedTag = elem;
//   }
// }

// 3. 填充文本到输入框
// 场景A：输入容器是可编辑div
inputContainer.textContent = latestSelectedTag.textContent;
// 场景B：容器内有input/textarea元素
// const input = inputContainer.querySelector('input, textarea');
// input.value = latestSelectedTag.textContent;

// 4. 强制光标定位到文本末尾
if (inputContainer.isContentEditable) {
  const range = document.createRange();
  const selection = window.getSelection();
  range.selectNodeContents(inputContainer);
  range.collapse(false); // 折叠到内容末尾
  selection.removeAllRanges();
  selection.addRange(range);
} else {
  // 针对input/textarea的简化写法
  input.setSelectionRange(input.value.length, input.value.length);
}
inputContainer.focus();

关键细节说明 #

• 全程无需事件对象，仅通过DOM查询API获取目标元素
• 利用元素的类名或ID前缀特性，确保拿到最新选中的标签（因为编号递增，最后一个即为最新添加项）
• 使用Range和Selection API绕过默认focus的光标位置问题，精准控制光标在文本末尾
• 兼容可编辑容器和普通输入框两种场景

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