Is there a way to make a text area partially editable? (make only portions of the text editable)

Question

I just came across a situation in which it would be an elegant solution to have only portions of a text area (previously loaded with text) be editable while other portions a

Answer 1

If you're using a plain textarea element, you won't be able to style up the required content (based on whether or not that content is editable). At best you'd be able to check to see whether the content your user is trying to change is on either the blacklist or whitelist and then stop the edit or not accordingly. You might also provide some visual feedback like a warning message saying "you can't do that".

My recommendation would be to take advantage of the contenteditable attribute, which might take a bit more time to style but will allow you much greater flexibility in the long run.

You would be able to style up a div element to look much like your required textarea, then use editable spans within that to set whether or not a particular block of text can be edited. You could then use JavaScript commands (refer to the link above) or use a "save" button to retrieve this content, set it as the value for your actual textarea (which you could have hidden) and post your page back as normal.

Use the following code as a rough example.

    This is some editable content which will 
    quickly be followed by some non-editable content