Long press (Event) to Select , Copy & Paste Text?


#1

Hi , Is there an Long press (Event) to Select , Copy & Paste a Text ? I want to have this on my app. Can you please help me, Thanks :smile:


How to make text selectable?
#2

this behavior is suppressed with a css-attribute called user-select --> you can check the ionic css, where this attribute is set and you can overwrite it for specific elements.


#3

Can you please give me some examples ? so that I can understand it clearly , THanks :smile:


#4

you can deactivate the selecting of content by setting a css-attribute for an dom element. This attribute is called “user-select” https://css-tricks.com/almanac/properties/u/user-select/. ionic sets this attribute in some of ther css-classes to avoid text-selections. you have to overwrite this attribute in your own css or at the dom elements to reactivate text-selection. You have to set it to text --> like

... style="user-select: text;" ....

#5

why it’s not working when I run it in my browser and my phone ? :frowning:


#6

Using the web inspector, inspect the element where you applied that style to. Make sure the style user-select: text;
is being applied. My guess is you are loading the ionic stylesheet after your custom stylesheet, so all the ionic properties are overriding any custom properties you set.

A workaround would be to change the order you load your stylesheets, or copy ionic’s stylesheet into your own style folder and edit it there.


#7

Hi @DaDanny , I applied it on my ionic stylesheet but it’s not working , is there something wrong in my code or , I’m just wrong in implementing my code ? you can look at my code here below:

style.css

.scroll-content#aboutCss  {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;

}

about.html

      <ion-content id="aboutCss" >
      <div class="card">
        <div class="item item-divider">
          <center>
          About Us
        </center>
        </div>
        <div class="item item-text-wrap" >
          <br>
          <h3>Overview
          </h3>

          <hr>
          <p align="justify"  >
            
           Learning nowadays requires innovative methods for the students 
            to acquire the information essential in learning. Technology 
            allows educators to reinvent the learning process suitable to the 
            needs of the 21st century learners.  <br><br>

            Nowadays, vast amount of 
            information and data is certainly used to support the needs of 
            humans and even the needs of the community. Many of the social 
            areas such as education has expanded its technological 
            requirements to suit the needs of its clients.  <br><br>
            
            This study attempts to combine mobile into a game-based learning 
            strategy enhancing the capacity of students to understand the OOP 
            concepts and apply it with Java language.   <br><br>
           
            Further, the study is initiated by the researchers for the students to 
            be acquainted with the latest technological advancement in 
            relation to teaching and learning processes. The idea here is to 
            provide a more playful and interactive learning experience to the 
            students and give them a learning environment that they are all  
            familiar. <br><br>
           
            </p>

            <br>
            <center>   
            <h3>Project Developers:</h3>  
            <hr>
            <br>

         <p>
            <b>Programmers: </b><br>
          Renmart G. Gallares <br>
          Son Jave T. Pagaduan <br> <br>
              
          <b>Tester:</b> <br>
          Jovelyn Aquinde <br><br>
            
          </p>
        </center> 

        <div class="row">
  <div class="col col-50">
    <center>
         <p>
           <b>Analyst: </b><br>
          Aaron Paul Sibayan <br>
           Making Villanueva <br><br>
         
          
          </p>
    </center>
  </div>
  <div class="col col-50">
    <center>
        <p>
             <b> Documenters:</b> <br>
          Klein Ann P. Agas <br>
          Desiree Lagota <br><br>          
        </p>
    </center>
  </div>
</div>
 <div class="row">
  <div class="col col-100">     
     <center>
          <p>
        
          <b>Adviser: </b><br>
          Arnel B. Ocay , MIT
       
          </p>
    </center> 
        </div>
 </div>

        </div>  

        <div class="item item-divider">
          <center>
          CCS Developers
        </center>
        </div>
      </div>
      </ion-content>
</ion-view>

#8

I’m not sure, I would take a look at this thread. Looks like some people had a few solutions you could try out.


How to make text selectable in android?
#9

Uhm, I’ve look at this thread but I think I’ts not working in android apps ? Do you have other solutions in my problem ?


#10

Hi @DaDanny I’ve made an example in Codepen, Can you help me fix this ?


#11

Make sure to add

‘overflow-scroll : true’ to the ion-content

Then I wrapped the text in a div with class=‘selectable’

then I made sure to add this to the selectable class.

-webkit-user-select: auto;

I haven’t tested this on an actual device, so you may want to confirm that it works on an actual device. Also, I’m not sure how this will interact with scrolling, so make sure you test that as well.

Good luck

EDIT

Just tested it on iOS and it does indeed allow the user to hightlight and copy the text. Not sure about Android…

EDIT

Android and iOS both work. Just tested on my devices.

Cheers.


#12

What did you do when you run this in your android device , did you do long press so the highlight and copy the text will appear?


#13

Wow ! It worked ! THanks :smile:


#14

Hi @DaDanny I Tried to put some slidebox on my app , then I tried to Implement the selectable , but it’s not working can you help me with this problem ?


#15

Oh, I finally Fixed it myself ! :smile:
I removed these ionic-list and ion-item

<ion-list class="list-inset selectable"></ion-list>
<ion-item class="item-text-wrap selectable"></ion-item>

and I change it into this div

<div class="item item-text-wrap"></div>

#16

Heck yea, dude! I knew you could solve that problem without me, you just gotta believe in yourself :smile:

If that codepen is an example of the app you are building, its really looking awesome. I can see where that quiz I’ve been helping you with will fit in haha :wink:

You’ll have to link me the final project once you finish it, I’m looking forward to seeing it.

Cheers!


#17

Hi, I have problem with copy & paste text, already tried different solutions, but still have no results.
This is my piece of code:

<ion-view view-title="Quote template">
  <ion-content>
    <div class="card">
          <div class="quote"><h3>Dinosaurs are a diverse group of animals of the clade Dinosauria. They first appeared during the Triassic period, 231.4 million years ago, and were the dominant terrestrial vertebrates for 135 million years, from the start of the Jurassic (about 200 million years ago) until the end of the Cretaceous (66 million years ago),[1] when the Cretaceous–Paleogene extinction event led to the extinction of most dinosaur groups at the end of the Mesozoic Era.</h3>
        </div>
    </div>
  </ion-content>
</ion-view>

And CSS

ion-content{
  overflow-scroll: true;
}

.scroll-content {
  background-color: #51cc74;

  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
}

a:link {
  text-decoration: none;
}

.quote {
  padding: 15px;
  user-select: auto;
}

.backdrop { display: none; }
.backdrop.visible { display: block; }
.loading-container:not(.visible) { display: none; }

What can i do?


Block the context menu on Text Selection by long press
#18

Work Perfectly…Thanks a lot…