Set jHtmlArea to readonly

Oct 11, 2009 at 7:27 PM

Is it possible to set HTML area to readonly?





Nov 5, 2009 at 1:30 PM

why would you want to do this?

Nov 5, 2009 at 3:44 PM

We are using jHtmlArea to record medical notes from physicians. When the physicians sign the note, the note should be visible in the rich format, but they cannot edit it.
I solved the problem by disposing jHtmlArea and replacing it with the <object> element. Maybe you can add that to the plugin?





Dec 3, 2009 at 5:12 PM

I am new in JQuery and jHtmlArea, how do you solve the problem?



Dec 3, 2009 at 5:19 PM

I read the contents of jHtmlArea into a variable.
Dispose jHtmlArea.
Create an object element with the contents of jHtmlArea.
Add object element in place of jHtmlArea.

Not an elegant solution, but it works.

Abhi Muthiyan
Co-founder, CTO
Patagonia Health

On Thu, Dec 3, 2009 at 12:12 PM, pantungw <> wrote:

From: pantungw

I am new in JQuery and jHtmlArea, how do you solve the problem?



Read the full discussion online.

To add a post to this discussion, reply to this email (

To start a new discussion for this project, email

You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe on

Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at

Dec 3, 2009 at 5:28 PM

Thank you very much - I'll try it today.


Mar 13, 2010 at 12:06 AM

it´s work?

i have the same problem!

Mar 13, 2010 at 3:43 PM
Yes, it has worked for me. Did you run into any problems? 

Abhi Muthiyan
Co-founder, CTO
Patagonia Health
Mar 13, 2010 at 9:23 PM

how you use?

I can´t understand?

where I put the <object> tag? can you show one exemple ?

Mar 13, 2010 at 9:35 PM
Here is the HTML code and corresponding jQuery code. Hope this helps.

HTML code with jHtmlArea

<!--Toolbar icons here-->
<iframe tabindex="1" style="height: 90px; width: 1179px;">
<!--HTML area here -->
<textarea class="noteTextArea" style="display: none;">
<textarea class="noteTextArea" style="display: none;">

// jQuery code for the HTML above
// $(this) is the HTML element that contains the jHtmlArea
var target = $(this).find('.noteTextArea');

// Extract content from jHtmlArea
var content = $(target).htmlarea('toHtmlString');
// Dispose jHtmlArea

// Create a HTML object element with the content from jHtmlArea
var obj = '<Object>' + content + '</Object>';

// Append this HTML object in the right place

After executing the javascript, the HTML looks like this:
<textarea class="noteTextArea" style="display: none;">
<object>Convert jHtmlArea to read-only

Jul 23, 2015 at 9:23 AM
Edited Jul 23, 2015 at 9:28 AM
Many thanks to abhivm!!!

I had exactly the same problem.
In our case the user shall create, edit and copy events, and the user shall be able to add dates to the event.
When the user creates or edits the event, jHtmlArea must be editable - in Rich Text Format.
When the user copies the event or if he adds additional dates to it, jHtmlArea must be readonly so that the user can see and verify which values are taken over. If jHtmlArea is editable then, the user might think that he can edit the value although it isn't allowed/supported by the underlying server-side code (C#, ASP.NET MVC) at that time, because it shall be a 100% copy of the event and also a 100% copy in case that the event becomes a series by adding more dates to the event. It would be confusing and irritating for the user because he might enter pages of text there before he finds out that nothing of his text gets stored then. And users will use an enabled feature, no matter how many warnings you put above and below it. All other Input fields can get grayed out/disabled. The user shall switch to the Edit page if he wants to edit the event. It shall prevent 'layer 8' (see ISO layer 8 = user) problems.

I know that jHtmlArea is free, but it would be really great if a readonly or disabled attribute could be added to jHtmlArea sometime in the future.
Probably it happened already, but I couldn't find it.