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

Question

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

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

演示

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

我发现了一个解决此问题的黑客，即：

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

在演示中，这已经实现，但是，此黑客在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;
}

修改后的小提琴：https://jsfiddle.net/xxk04mn6/7/