How to make only some text in a text-box read-only while allowing the rest to be edited

Question

I'm trying to use Javascript to make a text box that contains some read-only text at the beginning of the text box and then allows editing following the read-only text. How can I do this in Javascript/jquery?

Answer 1

here is some thoughts

roughly a 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/

combination to retrieve 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 ?!.. simply you cant acomplish what you want in a nice way .. and i cant imagine a situation where i want to do so .

alternatives

1 - in the text-field label put the constant text .

2 - when the user submits the form capture the value of the text-field and add your text to it .

3- add a help note to the user that this input should be as follows (eg : mytext-yourtext)