How do I make <div> editable...

Can I (with Javascript) make <div></div> editable with out needing a textbox. Only by clicking in the div and write text.

Any ideas?

 

<div onClick="this.contentEditable='true';">lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor</div>

 

Commonly we use textbox & textarea to write text by keyboard.But there is another control which can be used for the same pupose. Its DIV.

Generally Div is used as container of other control or to show readonly text by setting the following property of div:

contentEditable = "true"

 

The method has been posted. However, I would recommend staying away from this unless you are sure it is suitable for your purpose, as it is not as compatible as a textarea, there are no visual cues (so you would want to change styles via js as well), it requires javascript both to function and to submit (if you want to use what the user puts in the div), and it is easy to forget and put something you don't want them to edit inside the box.

 

If you want an 'invisible' textarea/textbox, you can try setting the color related properties of the control to colors of the background on which they are placed.

As skier88 pointed out, this may cause some problems (the code in my IE7 shows security warning which some users may not like) which you may regret later.