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.
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.
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
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.