手动将字符添加到输入元素时出现光标问题

Question

我正在使用 javascript

向 html 输入字段添加字符

document.querySelector('input');
input.value += getChar();

DEMO

虽然这可行，但当添加的字符多于适合输入视口的字符时，仍然存在一个问题。结果是插入符号将不再可见

我找到了解决此问题的技巧：

input.blur();
input.focus();

在演示中这已经实现了，但是，这个 hack 在 Edge 中不起作用。有什么建议可以让插入符保持在视图中吗？

Answer 1

这是适用于 Firefox、Chrome、Opera 和 Edge（未在 Safari 上测试）的版本。

当然，有些部分在某些浏览器上是无用的，并且应该测试旧浏览器支持的属性是否存在，但这有效：

对于 Firefox，blur() 没有用，但在 Chrome 中是必需的。

对于 Edge，select() 它向右移动，下一行取消选择文本。

function caretIntoView() {
    input.setSelectionRange(input.value.length, input.value.length);
    input.blur();
    input.focus();
    input.select();
    input.selectionStart = input.selectionEnd = input.value.length;
}

修改后的fiddle：https://jsfiddle.net/xxk04mn6/7/

手动将字符添加到输入元素时出现光标问题

Cursor issue when manually adding chars to input element

html

javascript

cross-browser

microsoft-edge