使用 JavaScript 将光标移动到输入字段

Move the Cursor to an Input field using JavaScript

将光标移动到输入字段：

选择输入元素。
调用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" />

    <button id="btn">Focus input</button>

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

这是相关的 JavaScript 代码。

索引.js


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

// ✅ Move focus to input field
input.focus();

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

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

我们使用该方法选择input字段。document.getElementById()

然后，我们使用
focus
方法将光标移动到输入字段。

focus如果元素可以聚焦，则该方法将焦点设置在调用该方法的元素上。

如果要在单击按钮时将光标移动到输入字段，click请向按钮元素添加一个事件侦听器。

索引.js


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

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

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

在我们的示例中，每次单击按钮时，handleClick()都会调用该函数，我们在其中调用focus()元素上的方法。

当输入字段获得焦点时的默认行为是将光标移动到字段的开头，即使输入元素中有文本也是如此。

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

这是下一个示例的 HTML。

索引.html


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

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

    <button id="btn">Focus input</button>

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

这是相关的 JavaScript 代码。

索引.js


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

const end = input.value.length;

// ✅ Move focus to the 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();
});

We used the
setSelectionRange
to set the start and end positions of the current text selection in the input
element.

The two parameters we passed to the setSelectionRange method are:

selectionStart – a zero-based index of the first selected character.
selectionEnd – a zero-based index of the character after the last selected
character.

An index greater than the length of the input’s value points to the end of the
value.

The last step is to call the focus() method on the element.

If you load the page with the example from the code snippet, you will see that
even though the input field contains text, we manage to move the cursor to the
end of the input’s value.

–