Question

I have a textbox to save the user facebook’s url.

<tr>
    <td>
        Facebook:
    </td>
    <td>
        <input style="width:300px" type="text" name="facebook" value="http://www.facebook.com/$facebook">
    </td>
</tr>

How can i make the value “http://www.facebook.com/” fixed and uneditable?

UPDATE:

the $facebook part needs to be editable!!

Answer 1

There are two methods to do this. One is to add the attribute disabled="disabled" to it, or add readonly to it.

Both work differently. What you need might be disabled="disabled" attribute.

EDIT

fiddle updated. You should include following jQuery code:

$(document).ready(function() {
    $("#inpt").val('http://www.facebook.com/$facebook');
    $("#inpt").on('change', function() {
        var tval = $(this).val();
        $(this).val('http://www.facebook.com/' + tval.substring(24));
    });
});

You may use keyboard events too, I am myself a beginner in jQuery, hence this basic piece of code. 🙂 Also, update the input tag to this:

<input id="inpt" style="width:300px" type="text" name="facebook" value="Any VALUE YOU WANT">