Click here to Skip to main content
13,351,465 members (45,944 online)
Click here to Skip to main content
Add your own
alternative version


9 bookmarked
Posted 7 Apr 2010

Editable Panel/Text Box on a Webpage with a Capability to Display HTML Text Inside it

Rate this:
Please Sign up or sign in to vote.
editable panel/text box on a webpage with a capability to display HTML text inside it


This article describes how to make an editable panel/text box on a webpage with a capability to display HTML text inside it. The approach adapted here is specific to our requirement.
The web page could be an .aspx, .html, .php or any other web based technology.


While working on one of the projects, the requirement is to display a formatted (HTML) text inside a text box. Upon researching the possibility of dynamically positioning a div element inside an html text box control, unfortunately that approach had its own challenges towards the placement, positioning & scrolling of text while the user enters the text inside the text box.

While researching other possibilities, an interesting capability of the div element in html which is supported by many popular browsers like Internet Explorer, Firefox and Safari, has drawn attention.
By adding the "contenteditable="true"", a div element behaves like a text box field, which allows text entry.
As you understand, a div element cannot post data to the server, so a workaround has been created to address the limitation.


  • A web based browser to view the web page
  • Good knowledge of HTML and JavaScript

Into the Code

Making an editable text box/Rich text box starting with the 3 elements.

  • A "Div" element
  • Some JavaScript
  • Style sheet to look like a textbox

Here is the style sheet to makes the div look like a text box.

<style type="text/css">
.editable {
    border-top-width : 1px;
    border-right-width : 1px;
    border-bottom-width : 1px;
    border-left-width : 1px;
    border-style  : dotted;

An interesting attribute worth making a note of is "white-space:pre-line;". It instructs the browser to display the text inside the div element in multi-line format.
Refer to "" for more information. If the above attribute is not used, the text displayed is without line breaks.

The actual HTML code to display the editable text entry is as below:

<div id="TextEdit" class="editable">
    <div id="request" runat="server" contenteditable="true"></div>
    <div id="requestInner" style="border-left:solid 1px gray; 
		margin-left:10px; margin-right:10px;" 

            contenteditable="false" UNSELECTABLE="ON">
	<b>I am the inner div</b>
	<br />with multiple lines. You can check me on this.<hr />
        This is the next line of text in <b>bold</b>, <i>Italic</i> and 
        <span style="text-decoration:underline">underlined</span>. 
        Click here for more details <a target="_blank" 


The output of the above code looks like this:


In order to achieve the text (HTML) inside a text box, I created a parent div element with id="TextEdit" and applied the stylesheet "editable".

Inside the parent div element, I added a child element id="request" and set its attribute "contenteditable="true"", which makes the div element as editable.

Right below the editable text area, I added another div element id="requestInner" with "contenteditable="false"" and displayed the rich text (HTML) inside it.

How to Save the Data

To save the data, a hidden multi-line text box has been added to the webpage.
Once the user enters the text and clicks on save, the text entered in div is copied into the hidden text box, just before the form submit. Here is the JavaScript.

<script type="text/javascript">
    function ReplaceTags(xStr) {
        var regExp = /<\/?[^>]+>/gi;
        xStr = xStr.replace(/<\/P>/gi, "\r\n");
        xStr = xStr.replace(/<BR>/gi, "\r\n");
        xStr = xStr.replace(/<P>/gi, "");
        xStr = xStr.replace(regExp, "");
        return xStr;
    function onsaveclicked() {
        var reqDiv = document.getElementById("<%=request.ClientID %>");
        var hhrequestBox = document.getElementById("<%=hrequest.ClientID%>");
        var responseText = ReplaceTags(reqDiv.innerHTML);
        hhrequestBox.value = responseText;
        return true;

If you are wondering why the method "ReplaceTags" is used, here is the answer.
Due to the built-in ASP.NET web form validation, it does not allow any text box to submit the HTML tags. So all the tags are being replaced, except the "P" and "BR".
In a typical text box, every time an "enter" key is pressed, it is represented by "\r\n" on Windows system.


This approach is not to make a rich text box like fckeditor, freetextbox or HTMLeditor. The purpose of this approach is very specific.
Due to the nature of project, I could not make use of any available free/commercial editors.



  • 7th April, 2010: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Devakumar Sai Chinthala
Founder &
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

QuestionIs 'TextEdit' referred as in, 'To save the data, a hidden multi-line text box has been added to the webpage'. Pin
Member 1066666819-Feb-15 18:48
memberMember 1066666819-Feb-15 18:48 
GeneralHTML5 Pin
tec-goblin13-Apr-10 1:53
membertec-goblin13-Apr-10 1:53 
GeneralRe: HTML5 Pin
SaidevKumar19-Apr-10 17:55
memberSaidevKumar19-Apr-10 17:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.180111.1 | Last Updated 7 Apr 2010
Article Copyright 2010 by Devakumar Sai Chinthala
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid