0

How to make only some text in a text-box read-only while allowing the rest to be edited. I'm trying to make a text box that allow user to input text and then there is some read-only text (non-editable) at the end of the text box. How can I do this in Javascript/jquery?

Eg of an input field:

DELIVERY ADDRESS

Enter your home or apartment number, ABC Area, XYZ Town

In above eg user is asked to provide home or apartment number and ABC Area, XYZ Town is a predefined value (already provided at some stage). If I split them in 2, most user put their complete address in the text field resulting in duplication of data. I need to avoid this duplication.

Thanks a mill in advance for your help.

Ansar Shah
  • 1
  • This isn't possible in the manner you describe. The value of the textbox is either editable or not, you cannot have a partial mix. A solution would be to have two boxes, one editable for the user, and the other readonly with the value you require. – Rory McCrossan Jul 05 '17 at 08:14

2 Answers2

1

There isn't possible solution for you to do for such case.

For better user experiences, I would suggest you to put editable text in a text box, and non-editable words in labels. In will help to not make user confuses.

Thang Pham
  • 611
  • 5
  • 12
0

I would do in the following way.

I would create two text boxes:
- text_box_1 - ABC Area and
- text_box_2 - XYZ Town //but invisible (style="display:hidden")
the content of text_box_2 by using jQuery I would populate an Absolute element with position above the text_box_1 which would look inside of text_box_1 but it will not affect the editable content.

If makes sense, you can follow such approach.

Sergiu Costas
  • 530
  • 4
  • 8
  • 26