Question

我需要使用外部键盘来填充一些输入字段。我需要用户能够将光标定位到字段中的特定位置，文本应该从该位置继续。

使用selectionStart时，我发现在文本字段中获取光标位置时出现问题。

下面的代码显示了错误 - 而不是在textfield的末尾添加一个数字，它被添加到开头，因为inp.selectionStart返回0;

有趣的是，我发现如果我删除了行inp.focus（）;然后在将数字添加到值的末尾时工作得更好但是当我点击字符串中的特定位置时，它工作正常，然后再次制动并跳转到0。

let inp;
let btn;
let dig = 0;

document.addEventListener("DOMContentLoaded", init);

function init() {
  inp = document.getElementById('inp');
  btn = document.getElementById('btn');

  btn.addEventListener("click", add_digit);

  inp.focus();
}

function add_digit() {
  const caretPos = inp.selectionStart;
  console.log('caretPos', caretPos)

  inp.value = inp.value.substring(0, caretPos) + (++dig%10) + inp.value.substring(caretPos);
  
  inp.setSelectionRange(caretPos+1, caretPos+1)
}

<input id="inp" />
<button id="btn">add digit</button>

Answer 1

我发现在add_digit（）函数的末尾添加inp.focus（）有助于在这里实现代码片段中的功能。

let inp;
let btn;
let dig = 0;

document.addEventListener("DOMContentLoaded", init);

function init() {
  inp = document.getElementById('inp');
  btn = document.getElementById('btn');

  btn.addEventListener("click", add_digit);

  inp.focus();
}

function add_digit() {
  const caretPos = inp.selectionStart;
  console.log('caretPos', caretPos)

  inp.value = inp.value.substring(0, caretPos) + (++dig%10) + inp.value.substring(caretPos);
  
  inp.setSelectionRange(caretPos+1, caretPos+1);

  inp.focus();
}

<input id="inp" />
<button id="btn">add digit</button>

输入字段，外部键盘，光标写入被破坏

1 个答案: