JSFiddle - React, Tailwind, and code Playground

by Shishir Morshed

HTML

<input type="text" id="your_id">

JavaScript

document.querySelector('input').addEventListener('keyup', function(){

var textInput = document.getElementById("your_id"), val = textInput.value;
var isAtStart = false, isAtEnd = false;
if (typeof textInput.selectionStart == "number") {
    // Non-IE browsers
    isAtStart = (textInput.selectionStart == 0);
    isAtEnd = (textInput.selectionEnd == val.length);
} else if (document.selection && document.selection.createRange) {
    // IE <= 8 branch
    textInput.focus();
    var selRange = document.selection.createRange();
    var inputRange = textInput.createTextRange();
    var inputSelRange = inputRange.duplicate();
    inputSelRange.moveToBookmark(selRange.getBookmark());
    isAtStart = inputSelRange.compareEndPoints("StartToStart", inputRange) == 0;
    isAtEnd = inputSelRange.compareEndPoints("EndToEnd", inputRange) == 0;
}

alert("At start: " + isAtStart + ", at end: " + isAtEnd);


});