JSFiddle - React, Tailwind, and code Playground

by Jörg Kowalski

HTML

<input name="inputName" id="inputId" value="Hello">
<input id="secondField">

JavaScript

var field = document.getElementById("inputId");
var checkCaret = function(f) {
    if (caretPos(f) == field.value.length) {
        document.getElementById("secondField").focus();
    }
}
field.onkeyup = function() {
    checkCaret(this)
};
field.onkeydown = function() {
    checkCaret(this)
};
field.onfocus = function() {
    checkCaret(this)
};


function caretPos(f) {
    if (f.createTextRange) {
        var r = document.selection.createRange().duplicate();
        r.moveEnd("character", f.value.length);
        return r.text == "" ? f.value.length : f.value.lastIndexOf(r.text)
    } else return f.selectionStart;
}