CODEWITHSUNDEEP
jqueryhtmlmacossafaricontenteditable
manpreet
manpreet

Reputation: 675

How to prevent Mac Safari to select text on right click in contenteditable area

I am working on an editor and is facing an issue with Mac Safari. Whenever user right click on a word, it selects the complete word alongwith opening menu

Problem can be reproduced by simple html:

<div contenteditable>
  <p>
  This is sample text
  </p>
</div>

It can be replicated at here also : https://plnkr.co/edit/VfxC5JcsI0VzWAQLUG1u?p=preview
I added preventDeafult also on right click but of no use.

Any js/jquery solution is welcome. It will be great if we can find a CSS solution

Upvotes: 3

Views: 1801

Answers (2)

Martijn ten Hoor
Martijn ten Hoor

Reputation: 764

The user-select:none option does not work, it will not select text with left mouse button but when accessing the contextmenu in safari it still selects the text you right clicked on.

What worked for me was to deselect the text with javascript.

document.getSelection().removeAllRanges();

Place above code into the $('div').contextmenu method for it to work.

Upvotes: 1

Stuart
Stuart

Reputation: 6780

You could use -webkit-touch-callout and/or user-select.

Upvotes: 0

Related Questions