JSFiddle - React, Tailwind, and code Playground

by Mark Penner

HTML

<input type="text" placeholder="cursor holder" />
<br>
<input id="hw" type="text" value="hello beautiful world" />
<br>
<button id="focus">set focus</button>

JavaScript

$.fn.selectRange = function (start, end) {
    if (typeof end === 'undefined') {
        end = start;
    }
    return this.each(function () {
        if ('selectionStart' in this) {
            this.selectionStart = start;
            this.selectionEnd = end;
        } else if (this.setSelectionRange) {
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};


var toggle = false;

setInterval(function () {
    if (toggle) {
        $('#hw').selectRange(6, 15);
    } else {
        $('#hw').selectRange(8);
    }
    toggle = !toggle;
}, 500);

$('#focus').on('click', function () {
    $('#hw').focus();
});