JSFiddle - React, Tailwind, and code Playground

by fallenreaper

HTML

Sel: <span id='sel'></span> 
<br />SelLen: <span id='selLen'></span> 
<br />Cursor Position: <span id='cursorPos'></span> 
<br />Character at Cursor Position: <span id='charatpos'></span> 
<br />
<input id='one' type='text' />Input Count: <span id='onecount'></span>
<br />
<input id='two' type='text' />Input Count: <span id='twocount'></span>
<br />
<input id='three' type='text' />Input Count: <span id='threecount'></span>
<br />

JavaScript

function getCursorPosition(jqueryItem) {
    var input = jqueryItem.get(0);
    if (!input) return; // No (input) element found
    if ('selectionStart' in input) {
        // Standard-compliant browsers
        return input.selectionStart;
    } else if (document.selection) {
        // IE
        input.focus();
        var sel = document.selection.createRange();
        var selLen = document.selection.createRange().text.length;
        sel.moveStart('character', -input.value.length);
        $("#sel").html(sel);
        $("#selLen").html(selLen);
        return sel.text.length - selLen;
    }
}
$(function () {
    alert("loaded");
    $("input").on("input", function () {
        var cPos = getCursorPosition($(this));
        $("#cursorPos").html(cPos);
        var FLAG = 'a';
        $("#charatpos").html($(this).val().charAt(cPos));
        $("#" + $(this).attr("id") + "count").html($(this).val().length);
        if ($(this).val().charAt(cPos) == FLAG) {
            var str = $(this).val();
            var sArr = str.split("");
            sArr.splice(cPos, 1);
            str = sArr.join("");
            $(this).val(str);
        }
    });
});