将光标移动到输入框的末尾.md

将光标移动到输入框的末尾

假设我们有一个表示用户全名的文本字段。还有一个编辑按钮用于更新 fullName。

<input type="text" id="fullName" />

<button id="edit">编辑</button>

有一个常见的需求，即单击编辑按钮将焦点放在文本字段上，并将光标移动到文本字段的末尾：

const fullNameEle = document.getElementById('fullName')
const editEle = document.getElementById('edit')

editEle.addEventListener('click', function (e) {
  // 聚焦 fullName 元素
  fullNameEle.focus()

  // 将光标移动到最后
  const length = fullNameEle.value.length
  fullNameEle.setSelectionRange(length, length)
})