How to make text input not editable for part of it?

Question

So I have text input

<input type="text" value="[phone]" class="telinfo">

Is there a way to keep 4 letters from the beginning? I want to save +9891read-only, and the user can delete all of this text field except this part.

Answer 1

You can capture keyupand blur(in case the user directly copies to paste the value into the text box) 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;
   }
}

Example implementation demonstration

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="[phone]" class="telinfo" data-fixedvalue = "+9891">

Run code

Answer 2

This issue is being solved @gurvinder372, but you can achieve this more easily than with a template Regex:

function phoneNumber(selector, num) {
  $(selector).on('input', function() {
    var reg = /\+/gi;
    if (!$(this).val().match(reg)) {
      $(this).val($(this).val().replace(/([\d]+)/g, "+" + num + "$1"));
    }
  });
}


phoneNumber('.telinfo', '9891');
phoneNumber('.mobinfo', '78');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" placeholder="+9891" class="telinfo">
<input type="text" value="" placeholder="+78" class="mobinfo">

Run code

Update: I also converted it to a reusable function.

Answer 3

readonly -

<input type="text" value="+9891" readonly>
<input type="text" value="" class="telinfo">

Wrap it in a container to add both inputs on the same line.

Answer 4

The easiest way is to separate read-only text from input text

<input type="text" value="+9891" size="3" disabled>
<input type="text" value="">

Answer 5

make css and html as below, change the style as per your requirement

<div class="field">
   <input type="text" value="" class="telinfo">
</div>
.field{
    float: left;
    width: 100%;
    position: relative;
    max-width: 240px;
   }
     .field:before{
      content: "+9891";
      position: absolute;
      left: 15px;
      top: 10px

     }
   .field input{
    background: #fff;
    border: 1px solid  #ddd;
    padding: 10px 15px 10px 58px; 
    font-size: 14px;
    line-height: 18px;
    color: #000;
   }

Answer 6

try this code, maybe this will help solve your problem.

<input type="text" value="[phone]" 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>