5

I want to disable text magnifying glass that appears when we long press on any html element.

It has started to appear again in IOS15.

I tried the following methods, but they did not work on iOS15. Disable magnifying glass in iOS html app

Do you know of any CSS properties or other ways to disable it?

Takabasi Syu
  • 51
  • 3

2 Answers2

3

The feature was brought back in iOS 15, see https://9to5mac.com/2021/06/07/ios-15-brings-back-the-magnifying-glass-for-accurate-text-selection/

One solution is to handle the "touchstart" event and call event.preventDefault() in your handler.

Note that the above solution does not work if you still want to handle events such as "click".

Also, Apple fixes the issue in WebKit by allowing using -webkit-user-select: none; to disable magnifying glass, see https://bugs.webkit.org/show_bug.cgi?id=231161

Zhen Yao
  • 51
  • 5
  • 1
    I appreciate your response. By the way, one thing I would like to ask is that when I call ”event.preventDefault()” in ”touchstart”event, the subsequent ”click” event are disabled. Do you know how to avoid this and at the same time disable the magnifier? I apologize for my poor English. – Takabasi Syu Oct 11 '21 at 02:08
  • @TakabasiSyu In that case you can call `event.preventDefault()` within your original `click` event handler. – Zhen Yao Oct 11 '21 at 17:19
  • 2
    @ZhenYao It seems that calling preventDefault in click event handler does not prevent magnifying glass to display. I cannot find any way to disable magnifying glass, and at the same time still allow default behavior for click – Louis GRIGNON Oct 18 '21 at 13:02
  • 1
    This answer does not solve the issue. – Robert Oct 25 '21 at 13:26
3

Disabling text selection alone with -webkit-user-select: none; did not work for me. I must use @Zhen Yao approach with calling event.preventDefault() in the touchstart event too.

Additionally: You can disable the magnifying glass on the entire document or on a specific element, depending on which element you call the touchstart event and set the css.

#some-html-id { -webkit-user-select: none; }

/* disable on specific html element */
var htmlElement = document.getElementById( 'some-html-id' );

htmlElement.addEventListener('touchstart', function( event ) { 
      event.preventDefault();
}, false);

Sample fiddle: https://jsfiddle.net/0efro6cw/

sergej
  • 1,077
  • 1
  • 14
  • 20