How to make contentEditable work under iOS 5/iOS 6

Question

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?

Answer 1

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