Wie wird das Ende des Textes in der Eingabe angezeigt, nachdem der Text programmgesteuert hinzugefügt wurde?

Question

Ich möchte programmgesteuert Wörter in der Eingabe hinzufügen und immer das Ende des Textes sehen. Aber das Problem ist, dass, wenn ich Wort (wie input.value += 'word') hinzufügen, wenn die Länge des Textes fast die gleiche wie die Länge der Eingabe ist, Text innerhalb der Eingabe nicht bewegt, so kann ich nur Anfang des Textes sehen und die Endung wird ausgeblendet .
Ich denke, wenn ich Cursor an das Ende der Eingabe setzen könnte es helfen, aber keine Tricks mit Cursor nicht in Chrome arbeiten, wie

input.value = input.value 

oder

input.setSelectionRange(input.value.length, input.value.length); 

Answer 1

Wenn der Eingang tut Wenn Sie den Fokus nicht haben, wird Chrome das Bild ganz nach links "scrollen" und den Anfang Ihres Eingabewerts anzeigen.

Wenn das Element den Fokus hat, dann können Sie den Auswahlbereich setzen Sie den Cursor bewegen:

window.onload = function(){ 
 
    
 
    var input = document.getElementById('foobar'); 
 
    input.value += ' bazbat'; 
 
    
 
    input.focus(); 
 
    input.setSelectionRange(input.value.length - 1); 
 
    
 
}

<input id="foobar" value="foobar" size="6">

Aber es wäre ein sehr verwirrend und frustrierend UX, wenn sich der Cursor bewegt herum, während der Benutzer versucht, einen Wert einzugeben.

Andere Optionen zu prüfen:

• Ändern Sie die Breite Ihrer Eingabe den Wert anzupassen. make html text input field grow as I type?
• Umschalten zwischen einem Eingang und einem Bereich (Bearbeitungsmodus vs. Lesemodus). Mit einer Spanne haben Sie viel mehr Kontrolle darüber, wie Text angezeigt wird. Jquery: Toggle between input and text on click
• Verwenden Sie einen Indikator, der den Benutzer darauf hinweist, dass einer seiner Eingabewerte geändert wurde. Dies wäre auch dann nützlich, wenn sie den gesamten Wert sehen können, da sie möglicherweise nicht bemerken, dass der Wert aktualisiert wurde.

Answer 2

scheint gut zu funktionieren:

let input = document.getElementById('auto'); 
 
let sentence = 'Courage is the magic that turns dreams into reality.'; 
 
let index = 0; 
 

 
setTimeout(function typing() { 
 
    let letter = sentence.charAt(index++); 
 

 
    input.blur(); 
 
    input.value += letter; 
 
    input.focus(); 
 
    input.setSelectionRange(index, index); 
 

 
    if (index < sentence.length) { 
 
    let ms = Math.floor(75 + Math.random() * 150); 
 

 
    setTimeout(typing, ms); 
 
    } 
 
}, 1000);

<input id="auto" type="text">