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();
        
        val = val.replace(/\..*/g, '');
        $("#domain").val(val + ".com");
        
        var caretPos = val.length;
        var elemId = "domain";
        
        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;
            }
        }
    }
}