Partially lock textarea content

[achintya]

Hi Guys

I am facing a complicated issue of partially locking content on textarea type fields. So far I have searched a lot in Google but nothing seems to have happened as I haven't found any help what so ever. Following is what client wants:

I want to have some of pre-populated contents to be uneditable by the user and only they can add there own contents in the html templates.

Is that really possible to do this using javascript/jquery library ?

If someone knows anything about this,please let me know.

Thanks in advance.

[Pullo]

Hi,
what do you mean by partially?
You can make a text field uneditable like this: <input type="text" readonly="readonly" />
And a tet area like this: <textarea rows="4" cols="50" readonly="readonly"></textarea>
But I'm guessing you already knew that, right?

[achintya]

Hi Pullo

Thanks for your reply.

I would like to do something like this:

I will pre-populate textarea with some contents which I need to non-editable but user can add their own with out deleting the pre-populated content.

I think I have able to explain my requirement.

Thanks again.

[Pullo]

I suppose, if you really had to, you could place a background image onto the text area and put padding on the area covered by the image so no one can write on it.
However, this is not a clean solution.

What I would do if I was you is use a text field for the uneditable part and set the value to the desired text, e.g.:
<input type='text' value='This text value is hardcoded or generated by a script and the user can't change it' >

Then follow this by a normal text area:
<textarea>type your text here</textarea>

[achintya]

Thanks Pullo for another reply on this issue.

The issue is that client would like the way I have mentioned above.

He has already got flash editor which has this option so he is trying to get same here on the textarea.

Anyway thanks for your reply once more.

[Pullo]

Well, good luck with that.
If you find a solution it would be nice if you could share it here.

[achintya]

Hi

I will of-course share if I find any solution to this.

Thanks

[felgall]

You could use onkeyup to test if the first part of the textarea content matches what it is supposed to be and change it back if it isn't. That would mean that if they type a one character change into the 'read only' portion it would be immediately changed back and if they pasted something in place of part or all of it the part of what is pasted over the 'read only' section would be immediately changed back. It wouldn't prevent them making a change to the 'read only' portion but it would prevent that change from still being there when they enter another character.

A simpler alternative is to display the fixed portion in a separate 'readonly' textarea immediately before the one they can edit and join the two fields together after the form has been submitted. For example the following displays two overlapping textareas so they look like one with the content of the first being readonly:

<style>
.var {margin-top : -15px;border-top:none;}
</style>

<form>
<fieldset><legend>Textarea with Fixed Text Portion</legend>
<textarea readonly="readonly" cols="50" rows="2">This part of the textarea content is fixed and cannot be changed</textarea><br/>
<textarea class="var" cols="50" rows="10">but the rest of the textarea content can be changed to whatever you want.</textarea>
</fieldset>
</form>