JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name="name" value="test" />

JavaScript

function halfEditable_INPUT (inputField,index)
    {
    if (typeof index=="undefined") index=inputField.value.length;

    this.element=inputField; 
    this.index=index;
    Object.defineProperty (inputField,"halfEditable_instance",{value:this,writable: false, enumerable:true, configurable:true});     

    Object.defineProperty (this,"value",                      {get:this.PRIVATE_getValue,set:this.PRIVATE_setValue});

    inputField.addEventListener ("keydown",this.PRIVATE_checkStatus_ONKEYDOWN);
    }
	halfEditable_INPUT.prototype.PRIVATE_checkStatus_ONKEYDOWN=function (event)
    {
    var keyCode=event.keyCode;
    var index=this.halfEditable_instance.index;
    var selectionStart=this.selectionStart, selectionEnd=this.selectionEnd;

    if (keyCode==36)
        {
        event.preventDefault();
        this.setSelectionRange (index,index);
        return;
        }

    if (selectionStart<index)
        {
        if (selectionEnd>index) this.setSelectionRange (index,selectionEnd);
        else this.setSelectionRange (index,index);
        }
    else if (selectionStart==index) {if (keyCode==8 || keyCode==37) event.preventDefault();}
    }

	halfEditable_INPUT.prototype.PRIVATE_setValue=function (value) {this.element.value=value;}
	halfEditable_INPUT.prototype.PRIVATE_getValue=function () {return this.element.value;}

	var inputA = new halfEditable_INPUT(document.getElementByName ("name").item(0).value);