滚动到 html 输入的插入符位置

Question

function sel() {
  document.getElementById('testid').focus();
  document.getElementById('testid').setSelectionRange(10, 10);
}

<input style="width:50px" id="testid" value="abcdefghijklmnopqrst">
<button onclick="sel()">select 10,10</button>

input.setSelectionRange(10,10) 第一次没有将值滚动到插入符号位置。滚动到插入符号是否可行？

Answer 1

交换它们

function sel() {
  document.getElementById('testid').setSelectionRange(10, 10);
  document.getElementById('testid').focus();
}

<input style="width:50px" id="testid" value="abcdefghijklmnopqrst">
<button onclick="sel()">select 10,10</button>

以上在我的 Chrome 中有效。如果它对你不起作用，你可能需要超时

function sel() {
  document.getElementById('testid').setSelectionRange(10, 10);
  setTimeout(() => document.getElementById('testid').focus(),10);
}

<input style="width:50px" id="testid" value="abcdefghijklmnopqrst">
<button onclick="sel()">select 10,10</button>

Scroll to the caret position of an html input