HTML5 contenteditable attribute not working properly on iOS7 Mobile Safari

问题

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!

回答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;
}

回答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;
}

来源：https://stackoverflow.com/questions/21295698/html5-contenteditable-attribute-not-working-properly-on-ios7-mobile-safari