JSFiddle - React, Tailwind, and code Playground

by bowheart

HTML

Enter domain name:
<input type="text" id="domain">

JavaScript

$(document).ready(function () {
    $("input").keyup(function () {
        var val = $("#domain").val();
        var elemId = "domain";
        
        var caretPos = getCaretPosition(elemId);

        val = val.replace(/\..*/g, '');
        $("#domain").val(val + (val ? ".com" : ""));
        
        setCaretPosition(elemId, caretPos);
    });
});

// code taken from http://stackoverflow.com/questions/512528/set-cursor-position-in-html-textbox
function setCaretPosition(elemId, caretPos) {
    var el = document.getElementById(elemId);

    el.value = el.value;

    if (el !== null) {

        if (el.createTextRange) {
            var range = el.createTextRange();
            range.move('character', caretPos);
            range.select();
            return true;
        } else {
            if (el.selectionStart || el.selectionStart === 0) {
                el.focus();
                el.setSelectionRange(caretPos, caretPos);
                return true;
            } else { // fail
                el.focus();
                return false;
            }
        }
    }
}

getCaretPosition = function (elemId) {
    var input = $('#' + elemId);
    if (!input) return; // No (input) element found
    if ('selectionStart' in input[0]) {
        // Standard-compliant browsers
        return input[0].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);
        return sel.text.length - selLen;
    }
}