Contenteditable on IOS: control/prevent selection

2019-04-08 03:37发布

问题:

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 included in the built-in one.

Is there a way to disable/hide/edit the behaviour of this toolbar?

回答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.



回答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.



回答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)