使用 JavaScript 将光标设置在文本区域的末尾

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

使用 JavaScript 将光标设置在文本区域的末尾

作者：迹忆客最近更新：2023/01/20 浏览次数：

将光标设置在文本区域的末尾：

使用 setSelectionRange() 方法将当前文本选择位置设置为文本区域的末尾。
在 textarea 元素上调用 focus() 方法。
focus 方法会将光标移动到元素值的末尾。

以下是本文示例的 HTML。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <textarea id="message" rows="5" cols="30">Initial text here</textarea>

    <button id="btn">Move cursor to beginning</button>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

const textarea = document.getElementById('message');

const end = textarea.value.length;

// ✅ Move focus to End of textarea
textarea.setSelectionRange(end, end);
textarea.focus();

// ✅ Move focus to End of textarea on button click
const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick() {
  // 👇️ get length right before clicking button
  const end = textarea.value.length;

  textarea.setSelectionRange(end, end);
  textarea.focus();
});

我们使用 setSelectionRange 来设置 textarea 元素中当前文本选择的开始和结束位置。

我们传递给 setSelectionRange 方法的两个参数是：

selectionStart - 第一个选定字符的从零开始的索引。
selectionEnd - 最后一个选定字符之后字符的从零开始的索引。

大于文本区域值长度的索引指向值的末尾。

最后一步是调用元素的 focus() 方法。

焦点元素将光标移动到调用该方法的元素。

这个想法是根本不选择任何文本，而是将光标移动到文本区域值的末尾并将其聚焦。

单击按钮时将光标设置在文本区域的末尾：

将点击事件侦听器添加到按钮元素。
每次单击按钮时，都会对文本区域元素调用 setSelectionRange() 方法。
调用 focus() 方法将光标移动到文本区域的末尾。

const textarea = document.getElementById('message');

// ✅ Move focus to End of textarea on button click
const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick() {
  const end = textarea.value.length;

  textarea.setSelectionRange(end, end);
  textarea.focus();
});