How to make multi line rich text field readonly

Question

None of the following code will change my multi line rich text field to be readonly (on an update form). The column name is Log.

$("textarea[id^='Log'] body").attr('readonly', true);
$("input[id^='Log'] body").attr("readonly",true); 
$($("[id^=Log][id$=inplacerte]")[0]).children().attr("readonly", true);
$($("[id^=Log][id$=inplacerte]")[0]).attr("readonly", true);
$("[id^=Log][id$=inplacerte]").attr("readonly", true);
$("[id^=Log]").attr("readonly", true);

The html that results looks like this

 <div class="ms-rtestate-field ms-rtefield ms-inputBox ms-inputBoxActive" id="Log_e060111e-51d4-491f-be4d-eeb4f4f18bc0_$TextField_topDiv" readonly="readonly">
   <div id="Log_e060111e-51d4-491f-be4d-eeb4f4f18bc0_$TextField_inplacerte_label" style="display: none;" readonly="readonly">Rich text editor Log</div>
   <div class="ms-rtestate-write ms-rteflags-0 ms-rtestate-field" id="Log_e060111e-51d4-491f-be4d-eeb4f4f18bc0_$TextField_inplacerte" role="textbox" aria-labelledby="Log_e060111e-51d4-491f-be4d-eeb4f4f18bc0_$TextField_inplacerte_label" style="min-height: 168px;" contenteditable="true" aria-autocomplete="both" aria-multiline="true" readonly="readonly" RteDirty="false">
      <div class="ExternalClassFDC8776178884911AD86361735106BB4" readonly="readonly">
        Field text entered here <br> aSasAS s ss s s 
        <span id="ms-rterangecursor-start" aria-hidden="true" RteNodeId="1">
        </span>
        <span id="ms-rterangecursor-end" aria-hidden="true">
        </span>
      </div>
   </div>
   <div style="clear: both;">
   </div>
</div>

Looking at the html, you can see readonly set to readonly everywhere, but I can still edit the field. Where have I gone wrong?

Answer 1

Bonanza...

The code

$($("[id^=Log][id$=inplacerte]")[0]).attr("contenteditable","false");

Did the trick.

Thanks for the hint!

Answer 2

Because the readonly attribute is only for input tags

It is the contenteditable attribute that makes a div tag editable

https://developer.mozilla.org/en/docs/Web/API/HTMLElement/contentEditable