How to remove iOS 9 text highlight and loupe in Cordova applications

Devops

Cordova

If you have worked on a Cordova mobile app without using any framework you might have come across the following behavior on iOS:

 

ipad-typing.jpg

 

On iOS, when you long press on text, the text selection feature kicks in to ruin your user experience. To deactivate the text highlight and the loupe you have to go through two steps.

Step 1 - Deactivate Text Highlight

Text highlighting can easily be deactivated using the following css rule:

* {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-callout: none;
  -webkit-touch-callout: none;
}

To preserve text selection on text inputs you need to negate the effect of the first rule using this other snippet:

input, textarea {  
    -webkit-user-select: text;
    -webkit-user-callout: default;
    -webkit-touch-callout: default;
}

Step 2 - Removing the remaining magnifying glass (iOS 9)

Although the css rule should be sufficient Apple decided that it'd be a really good idea to keep showing the loupe on the native webview element making it impossible to deactivate it via css or js.

magnifying-glass.png

Fortunately Eddy Verbruggen was equally frustrated by this "Feature" and created the following cordova plugin.

You can install it using the Cordova CLI

$ cordova plugin add cordova-plugin-ios-longpress-fix

And that's it, you now have an application that behaves as it should.

Articles similaires