How do I make a text input non-editable for a part of it? [duplicate]

Question

So I have a text input

<input type="text" value="+98912314789" class="telinfo">

Is there a way to keep 4 letter from the begin ? I want to keep +9891 read only and the user can delete all part of this textbox except this part.

Answer 1

You can capture the keyup and blur (in case user directly copy paste the value in textbox) event

function handleEv( event )
{
   var thisObj = event.currentTarget;
   var fixedValue = thisObj.getAttribute( "data-fixedvalue" );
   if ( thisObj.value.indexOf( fixedValue )  != 0 )
   {
      console.log(thisObj.value, fixedValue);
      event.preventDefault();
      thisObj.value = fixedValue;
   }
}

Demo of sample implementation

var el = document.querySelector( ".telinfo" );
el.addEventListener( "keyup", handleEv);
el.addEventListener( "blur", handleEv);


function handleEv( event )
{
   var thisObj = event.currentTarget;
   var fixedValue = thisObj.getAttribute( "data-fixedvalue" );
   if ( thisObj.value.indexOf( fixedValue )  != 0 )
   {
      console.log(thisObj.value, fixedValue);
      event.preventDefault();
      thisObj.value = fixedValue;
   }
}

<input type="text" value="+98912314789" class="telinfo" data-fixedvalue = "+9891">

Answer 2

try this code may be it will help to resolve your issue

<input type="text" value="+98912314789" class="telinfo" id="telphone" onchange="staticData()" onkeyup="staticData()">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function staticData(){
  var data=$("#telphone");
  if(data.val().length<5)
    {
     data.val("+9891");
     data.attr("readonly",true);
    }
    else
    {
     data.attr("readonly",false);
    }
}
</script>