views:

28

answers:

2

I have a DIV which contains some text. When a user clicks on some content in the DIV, I want to enable him to edit the content at that position.

<div id='Note'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br />
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip <br />
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse <br />
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, <br />
sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
</div>
A: 

May be you should use <textarea> element. Then you can edit text inside it at any position.

Kate
I agree with Kate, that would make a lot of sense. Besides, how do you allow the user to edit a DIV content, unless you convert it to a textarea. May be you could elaborate a little on what you are trying to achieve? There's usually more than one way of doing things.
Raine
i am doing a JavaScript-based note-editor (memonaut). I'm trying to achieve an effect similar to Google Notebook, where you can click on a note to edit it. The cursor lands up where the user-clicked.
sonofdelphi
You cat set <textarea disabled="disabled"> when user reads notes and <textarea disabled=""> when user click textarea to edit.
Kate
+2  A: 

contenteditable will do it in IE 5.5+, Firefox 3.0+, Safari 1.3+, Opera 9+, Chrome:

<div id="Note" contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br />
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip <br />
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse <br />
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, <br />
sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
</div>
Tim Down
i'm able to add stuff, thank you...but then things like backspace and delete don't seem to work.
sonofdelphi
Really? Works fine for me. In which browser?
Tim Down
have reported this as a bug for Firefox. Bug 571776 and 571694.
sonofdelphi
Interesting. The more I see of Firefox's implementation of `contenteditable`, the more I'm convinced they've made a bit of a botched job of it. `designMode` generally works much better. Thanks for the links.
Tim Down