JSFiddle - React, Tailwind, and code Playground

by johnc_22

HTML

<input type="button" value="just something to tab from">
<input type="text" id="id" value="Blah 1234 ABC XYZ !@#$ &*()">
<input type="button" value="just something to tab to">

JavaScript

function moveCaretToStart(el, blurTarget) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = 0;
    } else if (typeof el.createTextRange != "undefined") {
        el.focus();
        var range = el.createTextRange();
        range.collapse(true);
        range.select();
        
        if(blurTarget)
        {
        	window.setTimeout(function()
          {
          	blurTarget.focus();
          }, 25);
        }
    }
}

var textBox = document.getElementById("id");

textBox.onfocus = function() {
    moveCaretToStart(textBox);

    // Work around Chrome's little problem
    window.setTimeout(function() {
        moveCaretToStart(textBox);
    }, 1);
};

textBox.onblur = function() {
	var blurTarget = document.activeElement;

	  moveCaretToStart(textBox, blurTarget);

    // Work around Chrome's little problem
    window.setTimeout(function() {
        moveCaretToStart(textBox, blurTarget);
    }, 1);
};