13

I am currently working on a contenteditable iframe, which so far works perfectly under all browsers except for mobile Safari. I am using iOS 5.1.1. The issue is reproducible in any version of iOS that supports contentEditable up to the latest.

The issue is the following: The content gets focused correctly when you tap on it, you can move the cursor and everything, however once you apply an action to it the following happens: The focus is still in the iframe and you can see the cursor, however it does not respond to keydown as it previously did. Nothing happens, even if I move the cursor and still try to type anything inside.

Here is an example of what happens: http://www.quirksmode.org/dom/execCommand/

If you focus the iframe anywhere inside the content and say you apply text-align right. The content is correctly aligned to the right, but if you try typing any additional characters, you can see that the ui locks, but no new characters appear inside where the cursor is. If you try to apply a different command it would still work though.

Does anyone have an idea of how I can workaround this?

Mo.
  • 26,306
  • 36
  • 159
  • 225
Konstantin Dinev
  • 34,219
  • 14
  • 75
  • 100
  • 1
    Related question: http://stackoverflow.com/questions/723592/why-doesnt-contenteditable-work-on-the-iphone – Andrew Klatzke Jan 22 '13 at 18:26
  • May I ask what element the `contenteditable` attribute is being applied to? I know that Opera and Internet Explorer have issues with contenteditable being applied to anything other than `div`, despite the spec allowing it to be applied to anything. Have you tried adding it to a divider to see if it yields a different outcome? – James Donnelly Feb 28 '13 at 16:15
  • @JamesDonnelly It's applied to the body of the document in an iframe. – Konstantin Dinev Feb 28 '13 at 17:22

3 Answers3

2

you can simply use Iframes design mode instead of contenteditable attribute to make any HTML elements editable .

the javascript code to make elements in iframe editable is :

var iframe = document.getElementById ('the iframe Id ') ;
var doc = iframe.contentDocument || iframe.contentWindow.document;
doc.designMode = "on";

As I read no cross browser problems found in this method

for complete reference see here

mahmoud nezar sarhan
  • 746
  • 1
  • 9
  • 23
0

Is upgrading your version of iOS an option? I just tested all the conditions you described using iOS 6.1 without a problem.

Since iOS5 was the first version of iOS Safari to support content editable, it's likely that the implementation contained bugs. It appears to have matured.

theaccordance
  • 889
  • 5
  • 13
0

iOS 5.1.1 supports very minimal features of HTML5. It will work perfectly fine after you've updated it to iOS 7.

Auph
  • 3
  • 3