Contenteditable On Ios: Control/prevent Selection Toolbar?

I've got my own toolbar for contenteditable. On ipad the system generates its own pop-up toolbar when text is selected. This prevents the use of my toolbar, which has options not i

Solution 1:

I reported this issue in the WebKit issue tracker, bug 147406 as it seems there is no way to control this.

The impossibility to hide the toolbar completely is one problem, another one is that BIU (Bold/Italic/Underline) should not be always enabled as not always such formatting is enabled in a wysiwyg editor. For example in CKEditor the list of accepted tags can be configured via Advanced Content Filter), so if one disables <b>/<strong>, B should not appear in the contextual toolbar as well.

Solution 2:

You can add the following style to your content editable div: -webkit-user-modify: read-write-plaintext-only;.

Note this has the byproduct of preventing "ctrl+b", "ctrl+i" etc as well. This is probably a good thing.

Solution 3:

What about using this CSS on the element :

-webkit-user-select: none;

Although since we don't know much about the rest of your app, it may interfere with it, so you'd have to try it out... If you run into problems, then I don't think there is much to do about it - try to position your toolbar somewhere else where it's visible too ?

Source : http://bencollier.net/2010/04/disabling-hold-to-copy-on-mobile-safari/ (see the comments about the drawbacks)