Input / TextArea - Range Selection

App.md

Input / TextArea - Range Selection

This pen demonstrates the JavaScript functionality to retrieve and set the start and end range selection values for "input" / "textarea" fields.

A Pen by K.C.Ashish Kumar on CodePen.

License.

index.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>


<!--
© 2021 https://kcak11.com / https://ashishkumarkc.com
-->

input-textarea-range-selection.markdown

Input / TextArea - Range Selection

This pen demonstrates the JavaScript functionality to retrieve and set the start and end range selection values for "input" / "textarea" fields.

A Pen by K.C.Ashish Kumar on CodePen.

License.

script.js

/*
© 2021 https://kcak11.com / https://ashishkumarkc.com
*/

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());
        par.find(":input.getPos")[0].focus();
    });
});

scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

style.css

/*
© 2021 https://kcak11.com / https://ashishkumarkc.com
*/

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;
}