Lightning Tip: disable text selection in your #cordova #hybrid app

Lightning Tip

Lightning Tips are  small posts that provide an easy and to-the-point solution for common problems that cross-platform mobile app developers face.

This time, We’ll take on the text selection functionality from mobile browsers that users of your hybrid app might experience. If it’s unintended (often unexpected by the user) this might only diffuse the user’s attention and confuse them. Let’s make sure that users get that real mobile app experience.

 

Challenge
In order to make your #hybrid mobile app feel more authentic to the platform your user is on, it is more natural that they cannot select, copy and paste every description text, label or title that is shown on your html based screens. Also, some platforms use “callouts” to visualise that an element has been selected.
No need to let the user select a text if its sole purpose is to inform the user. Let’s fix this by removing the selection.

Solution
[crayon-6606b4ecef421715814841/] This will let you use form input fields and text area’s to perform copy/paste actions on but removes this from other elements.
As the code comments indicate you can set user-select to text if you’d like users to copy a label or something else for use elsewhere.