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

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.

why put them in the input element in the first place? An editable entity is editable, while non-editable are not. There is a design to this. — Randy Casburn, Feb 27 '18 at 06:48
@RandyCasburn I want to send it with form . span does not work to me — inaz, Feb 27 '18 at 06:49
@31piy I want to send it with form . span does not work to me — inaz, Feb 27 '18 at 06:52
[check here](https://github.com/digitalBush/jquery.maskedinput) for more details — guradio, Feb 27 '18 at 07:07

score 6 · Accepted Answer · answered Feb 27 '18 at 07:01

6

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">

answered Feb 27 '18 at 07:01

gurvinder372

66,980
10
72
94

Thanks. If I have another input with another constant value like +78 will I use this js code again? – inaz Feb 27 '18 at 07:13
@inaz Code is fairly generic, it takes the value from an attribute of the textbox `data-fixedvalue`... you just need to set that attribute and invoke this event handler on that element. – gurvinder372 Feb 27 '18 at 07:14
I invoke another input like this. var el = document.querySelector( ".telinfo, .mobinfo" ); but does not work to me – inaz Feb 27 '18 at 07:17
`querySelector` returns **single element**, use `querySelectorAll` and **iterate** the element list to bind the event. – gurvinder372 Feb 27 '18 at 07:20
var el = document.querySelectorAll( ".telinfo, .mobinfo" ); I've added querySelectorAll but my code doesn't work at all. how can I iterate this? – inaz Feb 27 '18 at 07:25
is there another task to do ? – inaz Feb 27 '18 at 07:30

score 1 · Answer 2 · answered Feb 27 '18 at 06:55

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>

Pedram · Answer 3 · 2018-02-27T08:30:46.017

This question solved by @gurvinder372 but you could achieve this easier than it with Regex pattern:

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">

Update: Also I converted this to function to usable multiple times.

score 0 · Answer 4 · answered Feb 27 '18 at 06:47

0

Try using two inputs one for readonly and second for editing -

<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.

answered Feb 27 '18 at 06:47

vishugosain

180
1
9

Or just put the non-editable part in a `` tag – Randy Casburn Feb 27 '18 at 06:48

score 0 · Answer 5 · answered Feb 27 '18 at 06:52

0

The easiest way is separating the read-only text from input text

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

answered Feb 27 '18 at 06:52

alter-native

13
6

i want a form with a input I need this value for sending to other page with form . in this way that you mentioned i cannot have all of value with a name – inaz Feb 27 '18 at 06:54

score 0 · Answer 6 · answered Feb 27 '18 at 06:54

make css and html like below change 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;
   }

I need this value for my form . I need to have the first part of it all the time. CSS does not work to me — inaz, Feb 27 '18 at 06:56

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

6 Answers6