javascript - 手动向输入元素添加字符时出现光标问题

Question

我正在使用 javascript 将字符添加到 html 输入字段

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

DEMO

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

我找到了一个解决这个问题的方法:

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

在演示中，这已经实现了，但是，此技巧在 Edge 中不起作用。有什么建议如何将插入符号保留在 View 中吗？

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/