remove contenteditable="true" on div and create textbox instead with jQuery

On Share开发者_开发问答Point blog sites the user inserts a new post by typing into a div with contenteditable set to true. This doesn't work on iPad since Safari on iPad doesn't support it.

I can find the div and remove the attribute but then, how will I be able to insert text? Can I replace the whole div with a multiline textbox (not sure what SharePoint thinks about that when it comes to saving though)?

The HTML looks like:

<tr>
    <td nowrap="true" valign="top" width="190px" class="ms-formlabel">
        <h3 class="ms-standardheader">
        <nobr>Body</nobr>
        </h3>
    </td>
    <td valign="top" class="ms-formbody">
        <!-- FieldName="Body"
             FieldInternalName="Body"
             FieldType="SPFieldNote"
        -->
        <span dir="none"><div class='ms-rtestate-field ms-rtefield' style=''><div id='ctl00_m_g_cc0fae80_c5f8_428c_9d00_793718f1d202_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_inplacerte_label' style='display:none'>Rich text editor</div><div class=' ms-rtestate-write ms-rteflags-0' id='ctl00_m_g_cc0fae80_c5f8_428c_9d00_793718f1d202_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_inplacerte' style='min-height:210px' aria-labelledby='ctl00_m_g_cc0fae80_c5f8_428c_9d00_793718f1d202_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_inplacerte_label'  contentEditable='true' ></div><div style="clear:both;"></div></div>
            <span dir="ltr">            
                <input name="ctl00$m$g_cc0fae80_c5f8_428c_9d00_793718f1d202$ctl00$ctl04$ctl01$ctl00$ctl00$ctl04$ctl00$ctl00$TextField_spSave" type="HIDDEN" id="ctl00_m_g_cc0fae80_c5f8_428c_9d00_793718f1d202_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_spSave" />
            </span>
        </span>
    </td>
</tr>

---

You could use the multiline box you speak of in place of the div but you would alter your column's field properties in your List Settings to make it that, not change out the code, or SharePoint may become disconnected to the list field you're trying to update.

If you have to use SharePoint's control, you could also hide the div:style="display:none" and populate it with jQuery from a generic textarea you could put on the page from SP Designer - can get the .text() or .html() or .val() of it (can't remember off the top of my head which one it is), assign it to var textAreaText and then use

$('id$=inplacerte').html(textAreaText);