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?
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
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/