Why doesn't @contenteditable work on the iPhone?

Question

Safari HTML Reference: Supported Attributes says:

contenteditable

If true, the element can be edited on the fly; if false, it cannot.

Answer 1

contenteditable has been added to iOS 5 beta 2, according to one of the developer videos from WWDC 2011. I suggest signing up to Apple's Safari developer program and downloading that video from the WWDC videos page.

If you sign up to be a Safari dev, you also gain the privilege to submit your Website to their online iOS Web app gallery.

Edit: I've confirmed this works on my iPad running iOS 5.0.1. Try it out here: http://www.quirksmode.org/dom/execCommand/

Answer 2

If you wanted to, you could make a virtual keyboard using clever css and javascript, and make it into a bookmarklet.

Answer 3

It works, kind of. I thought contenteditable doesn't work on iPhone before. When I set a div to contenteditable I couldn't move the cursor/pointer to where I wanted to move it. But, when I was fiddling around XHTML with contentEditable within iBooks.app on iPad, I found that "execCommand('insertText', null, 'foobar');" worked within Mobile Safari.

Answer 4

I think this is because editing HTML requires quite an advanced user interface. That's why desktop Safari implements it, while Mobile Safari doesn't.

Answer 5

The design mode and content editable are working fine in IOS 5.But in previous versions it is not working.There is post

http://mobile.tutsplus.com/tutorials/mobile-web-apps/safari-5_html5/

Answer 6

If you cannot focus the contenteditable element try adding this to your css

[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}