Double clicking on a div with contenteditable inside and iframe disables div

Question

If i create a div that has contenteditable true inside of an iframe and if you double click it it becomes non functional.the focus is still in the iframe and you can see the cursor, however it does not respond to keydown

Does anyone have an idea of how I can i overcome this?

EDIT:

i have implemented a dojo editor. if you open this link in ipad you will see the problem as described above.

Show your code! In the best case construct a minimal example that demonstrates your problem. — Patrick Oscity, May 22 '13 at 13:06
What is your purpose for the iframe? (there are a few, I need some clarification on what that is providing for you) I assume the contenteditable is your end goal -- an editable div, whereas the iframe is some type of middle layer. — Dan Sorensen, Jun 10 '13 at 16:27

score 1 · Answer 1 · edited May 23 '17 at 12:18

Trying to get a contenteditable div to work inside of an iframe is one level of complicated, if you are trying to get it to work inside of a specific WYSIWYG editor like Dojo editor, is another level harder, as there is a lot of JavaScript affecting the interactions. It would help to explain the parameters a little better in your question.

Have you used a browser debugger (like Firebug) to see what's happening when you click?

This other SO question and answer about contenteditable div vs iframe is useful.

Finally, if you are using iOS Safari, make sure you are using Safari 5.0 or better as the contenteditable attribute was only recently supported on that browser.

EDIT: Since you are using iOS 6, you should be using the iOS Safari JavaScript Debugger to let you know what's happening a little more clearly when you click on the editable div. If you can find some more specific error messages, please update us.

its is working fine in desktop browsers. this problem comes only in ipad. i`m trying to implement the dojo editor in an ipad app — Nisanth Sojan, Jun 11 '13 at 04:18
Being that it is happening inside iOS 6.0, I updated my answer with info on how to troubleshoot JavaScript errors/events. — Dan Sorensen, Jun 11 '13 at 13:40

lvarayut · Answer 2 · 2013-06-10T17:05:26.447

1

Which OS you are using? You should make sure that you are using OS 5.0 or later. According to the (Apple's Technical Notes) and Safari Web Content Guide. It is written:

The HTML contenteditable attribute is supported in iOS 5.0 and later. In earlier versions, replace contenteditable, used to enable text input within a styled element, with a styled textarea element. In Safari, you can customize the appearance of textarea elements using CSS. If necessary, you can even disable any platform-specific, built-in styling on a textarea element by setting -webkit-appearance to none.

So, if you are using an old OS version, you could use textarea elements instead of contenteditable. Then, it is guaranteed that your application will work as well.

PS. you can use your IPAD to go on this website, to try how does it work with textarea. It might be an example for you.

Hope that helps.

edited Jun 10 '13 at 17:05

answered Jun 10 '13 at 16:55

lvarayut

13,963
17
63
87

i`m using OS 6.0. its working fine if i create a simple contenteditable div, but after implementing dojo editor this happens – Nisanth Sojan Jun 11 '13 at 04:20
2

@NisanthSojan I am sorry to tell you that the `dojo editor` does not support the IOS devices. There are many people try to develop it but they are failed. You can take a look at the the [Dojo website](http://dojotoolkit.org/reference-guide/1.9/releasenotes/1.9.html). It is written that **iOS 4.x, 5.x (Mobile Safari) and 6.x (including all Dijit widgets except Editor)** And this [link](http://mail.dojotoolkit.org/pipermail/dojo-interest/2011-February/052262.html) from the Dojo email system. – lvarayut Jun 11 '13 at 07:22

Double clicking on a div with contenteditable inside and iframe disables div

2 Answers2