JSFiddle - React, Tailwind, and code Playground

by gilly3

HTML

<div><input class="getPos" /><input class="posStart" /><input class="posEnd" /><button>set cursor position</button></div>
<div><textarea class="getPos"></textarea><input class="posStart" /><input class="posEnd" /><button>set cursor position</button></div>

CSS

body, input, textarea {
    font-family: sans-serif;
}
div {
    margin-bottom: 10px;
}
.getPos ~ * {
    margin-left: 5px;
}
.getPos, input {
    width: 200px;
    padding: 2px 3px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
textarea {
    height: 200px;
}
textarea ~ * {
    vertical-align: top;
}
input {
    width: 3em;
}

JavaScript

function getCursorPos(input) {
    if ("selectionStart" in input && document.activeElement == input) {
        return {
            start: input.selectionStart,
            end: input.selectionEnd
        };
    }
    else if (input.createTextRange) {
        var sel = document.selection.createRange();
        if (sel.parentElement() === input) {
            var rng = input.createTextRange();
            rng.moveToBookmark(sel.getBookmark());
            for (var len = 0; rng.compareEndPoints("EndToStart", rng) > 0; rng.moveEnd("character", -1)) {
                len++;
            }
            rng.setEndPoint("StartToStart", input.createTextRange());
            for (var pos = { start: 0, end: len }; rng.compareEndPoints("EndToStart", rng) > 0; rng.moveEnd("character", -1)) {
                pos.start++;
                pos.end++;
            }
            return pos;
        }
    }
    return -1;
}

function setCursorPos(input, start, end) {
    if (arguments.length < 3) end = start;
    if ("selectionStart" in input) {
        setTimeout(function() {
            input.selectionStart = start;
            input.selectionEnd = end;
        }, 1);
    }
    else if (input.createTextRange) {
        var rng = input.createTextRange();
        rng.moveStart("character", start);
        rng.collapse();
        rng.moveEnd("character", end - start);
        rng.select();
    }
}
    
$(function() {
    $(":input.getPos").on("keyup click", function(e) {
        var pos = getCursorPos(this);
        $(this).siblings(".posStart").val(pos.start);
        $(this).siblings(".posEnd").val(pos.end);
    }).siblings("input").keydown(function(e){
        if (e.keyCode == 13){
            $(this).siblings("button").click();
            e.preventDefault();
        }
    });
    $("button").click(function(e) {
        var par = $(this).parent();
        setCursorPos(par.find(":input.getPos")[0], +par.find(".posStart").val(), +par.find(".posEnd").val());
    });
});