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.

Availability

Available in Safari 1.2 and later. Available in iPhone OS 1.0 and later.

However, on my iPhone, I can't get it to work. Anyone have success with this?

You can try it with this document (admittedly not pure html, but that document works in desktop Safari, and Chrome and Firefox 3). I haven't been able to get even the simplest html document to be editable in mobile Safari.

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

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 3

如果您愿意，您可以使用巧妙的 css 和 javascript 制作一个虚拟键盘，并将其制作成书签。

Answer 4

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

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

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

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.