カーソルの問題を手動で入力要素に文字を追加するとき

Question

私は、これは動作しますが、より多くの文字を追加する1つの問題は依然として存在しているのjavascript

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

DEMO

とHTMLの入力フィールドに文字を追加しています入力のビューポートに収まります。デモで

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

このすでに実装されている、しかし、このハックはエッジでは動作しません。結果はキャレットはもう

見ることができないということです私は、この問題を解決するためのハックを見つけました。どのようにビューにキャレットを保持するための任意の提案？

Answer 1

これは、Firefox、Chrome、Opera、およびEdge（Safariでテストされていない）で動作するものです。

一部はもちろん、一部のブラウザでは役に立たない、そしてテストは古いブラウザのサポートのための属性の存在のためになされるべきであるが、これは動作します：

Firefoxの場合

、blur()はChromeで役に立たないが、必要です。

エッジの場合、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/