Saturday, June 9, 2018

Allow users to select and copy text in ionic 2 | ionic 3 in ionic 2 | ionic 3 | ionic 4

First, add this (selectable) class in your app.scss file. For specific page include in your page.scss file.

.selectable {

-webkit-user-select: text;

-moz-user-select: text;

-ms-user-select: text;

user-select: text;

}


After this please add “selectable” class to individual elements in the app or to ionic elements using the ngClass/class attribute.  

Eg :

<ion-card-content ngClass=”selectable”>

    <p  [innerHTML]=”item.body”></p>

  </ion-card-content>



Other Eg :

<ion-content padding ngClass=”selectable”>

This will allow your users to select and copy text from within your Ionic 2, Ionic 3, Ionic 4 app. 


2 comments:

  1. Wow this is great, and yet difficult to find on the web. You solved a big problem for me.
    Is there any way, however, to control the options that appear?
    What appears on my simulator are "copy", "lookup", and "share" options, I would like to suppress these and add some of my own (like: "favourites")

    ReplyDelete
    Replies
    1. You can not add your own option in this. If you want to do like this, Then I suggest you to create your own component for this.

      Delete