Home > Article > Web Front-end > What should I do if text cannot be copied or pasted by long pressing in the ionic app?

What should I do if text cannot be copied or pasted by long pressing in the ionic app?

php中世界最好的语言Original: 2018-03-08 09:43:594399browse

This time I will bring you what to do if the text in the ionic application cannot be copied and pasted by long pressing. What are the precautions to solve the problem that the text in the ionic application cannot be copied and pasted by long pressing. The following is a practical case. Let’s take a look.

The project is about to go online, but it encountered a strange problem. The text in ionic cannot be copied and pasted like a normal wap page.

I looked through official documents and Chinese websites, but there is no explanation on this issue.

The following URL is the first result of Google search:
http://ionichina.com/topic/55d18fff628dd6dc21b07d75
I have tried all the methods here, but they are not ideal.

Later, after searching for information from various sources, this problem was solved. Share it with everyone next.

Go directly to the code:

html part

<html ng-app="ionicApp"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Ionic文字复制问题</title>
    <link href="http://code.ionicframework.com/1.0.0-beta.4/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.4/js/ionic.bundle.js"></script></head><body ng-controller="MyCtrl">
    <ion-header-bar class="bar-positive">
        <h1 class="title">ionic 测试copy</h1>
    </ion-header-bar>
    <ion-content overflow-scroll=&#39;true&#39;>
        <div class="selectable">幻灯片1测试文字，试试可以复制</div>
    </ion-content></body></html>

css part

ion-content{  overflow-scroll: true;
}.scroll-content {  -webkit-user-select: auto !important;  -moz-user-select: auto !important;  -ms-user-select: auto !important;  user-select: auto !important;
}.selectable {  -webkit-user-select: auto;//控制网页内容选择范围
}

js part

angular.module(&#39;ionicApp&#39;, [&#39;ionic&#39;])
.controller(&#39;MyCtrl&#39;, function($scope) {
  stop_browser_behavior: false  self.touchStart = function(e) {
  self.startCoordinates = getPointerCoordinates(e);  if ( ionic.tap.ignoreScrollStart(e) ) {    return;
  }  if( ionic.tap.containsOrIsTextInput(e.target) ) {    // do not start if the target is a text input
    // if there is a touchmove on this input, then we can start the scroll
    self.hasStarted = false;    return;
  }
  self.isSelectable = true;
  self.enableScrollY = true;
  self.hasStarted = true;
  self.doTouchStart(e.touches, e.timeStamp);  // e.preventDefault();};
});

We can see through the code, First, add overflow-scroll='true' in the html, and then add a custom class on the container where we want to copy the text. In the code, we add '.selectable' and set our css style on this class. .

It should be noted here that this custom class cannot be added to the specific tag of ionic. As follows:

<ion-content class="selectable" overflow-scroll="true">

It is invalid to write it like this. We must write it like this:

<ion-content overflow-scroll=&#39;true&#39;> 
     <div class="selectable">幻灯片1测试文字，试试可以复制</div> </ion-content>

means that I didn’t write it correctly because of this. Debugging After a long time, I can’t get the effect. . . .

The last step is to copy the above js code in the controller corresponding to the page.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

What should I do if text cannot be copied or pasted by long pressing in the ionic app?

Related articles