How to make only text in a read-only text box, allowing you to edit the rest

Question

I am trying to use Javascript to create a text field containing read-only text at the beginning of the text field, and then allows me to edit read-only text. How to do this in javascript / jquery?

Answer 1

Here is an attempt:

var readOnlyLength = $('#field').val().length; $('#output').text(readOnlyLength); $('#field').on('keypress, keydown', function(event) { var $field = $(this); $('#output').text(event.which + '-' + this.selectionStart); if ((event.which != 37 && (event.which != 39)) && ((this.selectionStart < readOnlyLength) || ((this.selectionStart == readOnlyLength) && (event.which == 8)))) { return false; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <input id="field" type="text" value="CAN'T TOUCH THIS!" size="50" /> <div id="output"> </div> 

This disables keys other than the left and right arrows for the read-only part. It also disables the backspace key when it is only at the end of the read-only part.

From what I read, this will not work on IE <= 8.

---

Here it is written in plain JavaScript (without jQuery):

 function makeInitialTextReadOnly(input) { var readOnlyLength = input.value.length; field.addEventListener('keydown', function(event) { var which = event.which; if (((which == 8) && (input.selectionStart <= readOnlyLength)) || ((which == 46) && (input.selectionStart < readOnlyLength))) { event.preventDefault(); } }); field.addEventListener('keypress', function(event) { var which = event.which; if ((event.which != 0) && (input.selectionStart < readOnlyLength)) { event.preventDefault(); } }); } makeInitialTextReadOnly(document.getElementById('field')); 

 <input id="field" type="text" value="CAN'T TOUCH THIS!" size="50" /> 

Answer 2

here are some thoughts

rude solution with jquery

HTML

 <input type="text" id='myinput' value ="my text"> 

JQuery

 var orginal_text = $('#myinput').val(); var regular_expression = '/^' + orginal_text +'/' ; $('#myinput').keyup(function(){ var current_text = $('#myinput').val(); if(current_text.match('^' + orginal_text +'') == null){ $('#myinput').val(orginal_text + ' ' +current_text ) } }) 

http://jsfiddle.net/e5EDY/

with css

HTML

  <input type="text" id='my_sticky_text' value ="my text" readonly='readonly'> <input type="text" id='myinput' value ="my text"> 

CSS

 #my_sticky_text{ position:absolute; left : 0px; } #myinput{ position:absolute; left : 50px; border-left:none; } 

http://jsfiddle.net/kaf4j/

to get the value

HTML

  <input type="text" id='my_sticky_text' value ="my text" readonly='readonly'> <input type="text" id='myinput' value ="my text"> <br> <hr> <button id='getval'>get value</button> 

CSS

 #my_sticky_text{ position:absolute; left : 0px; } #myinput{ position:absolute; left : 50px; border-left:none; } 

JQuery

 $('#getval').click(function(){ var sticky_text = $('#my_sticky_text').val(); var user_text = $('#myinput').val(); alert (sticky_text + ' ' + user_text) }) 

http://jsfiddle.net/YsNMQ/

what do we get from all this?! .. you just can’t do what you want in a beautiful way .. and I can’t imagine the situation when I want to do it.

alternatives

1 - in the text box label, place the permanent text.

2 - when the user submits the form, captures the value of the text field and adds text to it.

3- add help to the user that this entry should be as follows (for example: mytext-yourtext)

Answer 3

The following is a modified version of John S's answer to prevent cut / paste operations (for example, by right-clicking):

 function makeInitialTextReadOnly(input) { var readOnlyLength = input.value.length; input.addEventListener('keydown', function(event) { var which = event.which; if (((which == 8) && (input.selectionStart <= readOnlyLength)) || ((which == 46) && (input.selectionStart < readOnlyLength))) { event.preventDefault(); } }); input.addEventListener('keypress', function(event) { var which = event.which; if ((event.which != 0) && (input.selectionStart < readOnlyLength)) { event.preventDefault(); } }); input.addEventListener('cut', function(event) { if (input.selectionStart < readOnlyLength) { event.preventDefault(); } }); input.addEventListener('paste', function(event) { if (input.selectionStart < readOnlyLength) { event.preventDefault(); } }); } makeInitialTextReadOnly(document.getElementById('field')); 

Fiddle: http://jsfiddle.net/p0jyktvu/3/