text in the input field which cannot be deleted

Issue

I’ve an input field such as

<input type="text" value="static text">
</input>

Is it possible that static text cannot be deleted or selected? This is required so that user can input text after the ‘static text’.

Solution

I suggest you to do this way (just HTML & CSS Solution):

<label for='txt'>static text
   <input type="text" id='txt' value=""/>
</label>

Put your input[type=text] in a label and give some id as i given here as #txt and do some styling in the css as below:

#txt {
   border:none;
   outline:none;
}
label[for="txt"] {
   border:solid 1px #d5d5d5;
   padding: 0 0 0 5px;
}

A demo for you.

Answered By – Jai

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.