HTML5 contenteditable attribute not working properly on iOS7 Mobile Safari

Question

It seems that the contenteditable attribute (which worked fine on iOS6) has stopped working on iOS7 webkit. Though the browser seems to recognize the field as editable, and brings up the keyboard, any input seems to close it, or it fails to register. Any encounter the same problem, or have any workarounds?

You can try it out over here - http://html5demos.com/contenteditable

Thanks!

Answer 1

I ran into this problem today. The solution for me was to set user-select to "text" in the CSS for any editable elements:

* {
    -webkit-user-select: none;
    user-select: none;
}

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

Answer 2

I was having the same issue and the below link helped me resolve it.

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW1

The solution that worked for me was to set "-webkit-user-modify" property to "read-write" for any editable element (you have defined as contenteditable)

*{
    -webkit-user-modify:read-write;
}