Disable Text Entry Into Rich Text Area Using Javascript

Question

I'm trying to make specific rich text areas within a list edit form 'read only' based upon the overall status of the list item.

In order to do this I've tried to use the following:

$("textarea[Title='What']").attr("disabled", "disabled");

Within IE the textarea always appears as editable. I think this may be down to the 'rich text' toolbar loading after my attempt to disable but I'm unsure how to get around this.

I would appreciate any suggestions or solutions to this issue.

Thanks.

Answer 1

Try this:

• to disable the textarea

  $("textarea[title^='What']").attr('disabled', 'disabled');
  

• to hide

  $("textarea[title^='What']").css('display', 'none !important');
  

• or

  $("textarea[title^='What']").parent().find("iframe").hide(); 
  $("textarea[title^='What']").css('display', 'block !important');
  $("textarea[title^='What']").attr('disabled', 'disabled');
  

Answer 2

To remove resize in textarea, use resize:none CSS:

https://stackoverflow.com/questions/5235142/how-to-disable-resizable-property-of-textarea

To disable it, use disabled attribute:

http://www.w3schools.com/tags/att_textarea_disabled.asp

Also, be aware that client side can be messed with:

You can try doing it on $(document).ready() or $(window).load() to make sure other scripts have finished.

Answer 3

In order to create a clean read only output for the user in multiple browsers the following needs to be performed:

1. Hide the textarea, shown by non IE browsers. This textarea could simply be disabled and left visible but it contains HTML tags generated during rich text edit, not clean output.
2. Hide the Rich Text Editor toolbar, shown within IE.
3. Hide the Rich Text Editor window, shown within IE.
4. Hide the link shown within non IE browsers that describes entry of basic HTML formatting.
5. If required hide the text description of the output, you may not wish to show the description of entry field.
6. Add the output of the textarea in place of all the above elements.

It's important that the elements are hidden rather than removed as they will be required upon form submission.

The following function takes the title of a textarea and will achieve all of the above steps. It can be modified as necessary to leave descriptions etc.

function DisableTextArea(title) {  
    // Hide the textarea and get it's content, note that the content comes formatted with HTML tags.
    var newOutput = $("textarea[title='"+ title +"']").hide().val();  

    // Add text area content to the parent tag for the area. This provides a read only output of the text area.
    $("textarea[Title='"+ title +"']").closest("span").append( newOutput );  

    // Hide the rich text editor toolbar.
    $("textarea[Title='"+ title +"']").closest("span").find("table[id$='_toolbar']").hide();

    // Hide the rich text editor window.
    $("textarea[Title='"+ title +"']").closest("span").find("iframe[title='Rich Text Editor']").hide();

    // Hide the link to HTML editing info, visible within non IE browser.
    $("textarea[Title='"+ title +"']").closest("span").parent("span").find("span.ms-formdescription").hide();

    // Hide any text within the parent div, as entry isn't allowed we don't need the text describing input.
    $("textarea[Title='"+ title +"']").closest("td").contents().filter(function(){
        return(this.nodeType == 3);
    }).remove();    
}