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 are not ("greyed out", so to speak).

Is this possible at all by using javascript in general?

I would be using jQuery.

Answer 1

You could do this (just an outlined idea, no code):

Devise a regex that matches your entire text. Use fixed strings for the unmodifiable parts, and use [\s\S]*? for the modifiable parts. Use ^ and $ to anchor your regex.

/^This is fixed text\. Now something editable:[\s\S]*?Now fixed again\.$/ 

Now react to the keyup event, and probably other events as well (like paste).

With every relevant event, make a check if the regex still matches.

If it doesn't, cancel the event.

Effectively, this should stop modifications to parts that are literal in the regex and thus make certain parts of your text read-only.

Don't forget to test the string on the server side as well after the form post - never trust that the client cannot send invalid values.

---

EDIT

You can use a regex quote function to dynamically build that regex from strings, this should save you a lot of the hassle.

function regexQuote(s) { return s.replace(/[\[\]^$*+?{}.|\\]/g, "\\$&") } 

usage

var re = new Regex(   "^" +    [regexQuote(fixedPart1), regexQuote(fixedPart2)].join("[\\s\\S].*?")    + "$" ); 

Answer 2

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.

<div id="editable-content">     <span id="block1" class="editable" contenteditable="true">This is some editable content which will </span>     <span id="block2" class="non-editable">quickly be followed by some non-editable content</span> </div> <div style="display: none;">     <textarea id="PostedContent"></textarea> </div> <div>     <input id="save-page" type="submit" value="Save Page" /> </div>  <script type="text/javascript">     $(function () {         $('#save-page').click(function () {             $('#PostedContent').val($('#editable-content').text());         });     }); </script>