Que dois-je faire si le texte ne peut pas être copié ou collé en appuyant longuement sur l'application ionic ?-js tutoriel-php.cn

Que dois-je faire si le texte ne peut pas être copié ou collé en appuyant longuement sur l'application ionic ?

php中世界最好的语言

Libérer： 2018-03-08 09:43:59

original

4446 Les gens l'ont consulté

Cette fois, je vais vous dire quoi faire si le texte de l'application ionique ne peut pas être copié et collé en appuyant longuement. Quelles sont les précautions pour résoudre le problème que le texte de l'application ionique ne peut pas. être copié et collé par un appui long. Ce qui suit est un cas pratique.

Le projet était sur le point d'être mis en ligne et a rencontré un problème étrange. Le texte en ionic ne peut pas être copié et collé comme une page wap normale.

J'ai parcouru les documents officiels et les sites Web chinois, mais il n'y a aucune explication sur cette question.

L'URL suivante est le premier résultat de la recherche Google :
http://ionichina.com/topic/55d18fff628dd6dc21b07d75
J'ai essayé toutes les méthodes ici, mais elles ne sont pas idéales.

Plus tard, après avoir recherché des informations provenant de diverses sources, ce problème a été résolu. Partagez-le ensuite avec tout le monde.

Aller directement dans le code :

partie html

<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>

Copier après la connexion

partie css

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;//控制网页内容选择范围
}

Copier après la connexion

partie js

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();};
});

Copier après la connexion

pass Nous pouvons voir dans le code que d'abord, ajoutez overflow-scroll='true' dans le code HTML, puis ajoutez une classe personnalisée sur le conteneur où nous voulons copier le texte. Dans le code, nous ajoutons '.selectable'. . Dans cette classe, activez notre style CSS.

Il convient de noter ici que cette classe personnalisée ne peut pas être ajoutée à des balises spécifiques d'ionic. Comme suit :

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

Copier après la connexion

Écrire comme ceci n'est pas valide. Nous devons l'écrire comme ceci :

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

Copier après la connexion

signifie que je ne l'ai pas écrit correctement à cause de cela, et débogué depuis longtemps. Ne peut produire aucun effet. . .

La dernière étape consiste à copier le code js ci-dessus dans le contrôleur correspondant à la page.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment implémenter des onglets de style mvvm dans Angularjs ? Case + Code

Une collection de codes très pratique pour les projets vue2.0

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!