将光标移动到 JS 中输入字段的开头或结尾

使用 JS 将光标移动到输入字段的末尾

将光标移动到输入字段的末尾：

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

这是示例的 HTML。

索引.html


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

  <body>
    <input
      type="text"
      id="first_name"
      name="first_name"
      value="Initial value"
    />

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

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

这是相关的 JavaScript 代码。

索引.js


const input = document.getElementById('first_name');

const end = input.value.length;

// ✅ Move focus to END of input field
input.setSelectionRange(end, end);
input.focus();

// ✅ Move focus to END of input field on button click
const btn = document.getElementById('btn');

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

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

将光标移动到输入的末尾

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

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

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

大于输入值长度的索引指向值的末尾。

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

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

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

单击按钮时将光标移动到输入字段的末尾

要在单击按钮时将光标移动到输入字段的末尾：

将click事件侦听器添加到按钮元素。
每次单击按钮时，调用setSelectionRange()输入元素上的方法。
调用focus()方法将光标移动到输入字段的末尾。

索引.js


const input = document.getElementById('first_name');

const btn = document.getElementById('btn');

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

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

每次单击按钮时，handleClick都会调用该函数，我们在其中：

将输入字段中的文本选择设置到其最后一个字符之后的位置。
聚焦元素。

使用 JS 将光标移动到输入字段的开头

将光标移动到输入字段的开头：

使用setSelectionRange()方法将光标移动到输入字段的开头。
focus()在输入元素上调用该方法。
该focus方法会将光标移动到元素值的开头。

这是示例的 HTML。

索引.html


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

  <body>
    <input
      type="text"
      id="first_name"
      name="first_name"
      value="Initial value"
    />

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

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

这是相关的 JavaScript 代码。

索引.js


const input = document.getElementById('first_name');

// ✅ Move focus to Beginning of input field
input.setSelectionRange(0, 0);
input.focus();

// ✅ Move focus to Beginning of input field on button click
const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick() {
  input.setSelectionRange(0, 0);
  input.focus();
});

将光标移动到输入的开头

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

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

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

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

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

这个想法是根本不选择任何文本，而是将光标移动到输入值的开头并将其聚焦。

将光标移动到 BEGINNING 或单击按钮时的输入字段

要在单击按钮时将光标移动到输入字段的开头：

将click事件侦听器添加到按钮元素。
每次单击按钮时，调用setSelectionRange()输入元素上的方法。
调用focus()方法将光标移动到输入字段的开头。

索引.js


const input = document.getElementById('first_name');

const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick() {
  input.setSelectionRange(0, 0);
  input.focus();
});

每次单击按钮时，handleClick都会调用该函数，我们在其中：

将输入字段中的文本选择设置到其第一个字符之前的位置。
聚焦元素。

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

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

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

这是示例的 HTML。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </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 代码。

索引.js


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()方法。

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

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

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

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

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

索引.js


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();
});

每次单击按钮时，handleClick都会调用该函数，我们在其中：

将文本区域中的文本选择设置到其最后一个字符之后的位置。
聚焦元素。

length请注意，当单击按钮时，我们立即获得了元素的值。这确保变量中的值始终是最新的。 end

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：

将光标移动到 JS 中输入字段的开头或结尾

目录

Move the Cursor to the End of an Input field using JS

使用 JS 将光标移动到输入字段的末尾

单击按钮时将光标移动到输入字段的末尾

使用 JS 将光标移动到输入字段的开头

将光标移动到 BEGINNING 或单击按钮时的输入字段

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

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

额外资源