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='true'> <div class="selectable">幻灯片1测试文字,试试可以复制</div> </ion-content></body></html>
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;//控制网页内容选择范围 }
partie js
angular.module('ionicApp', ['ionic']) .controller('MyCtrl', 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();}; });
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">
Écrire comme ceci n'est pas valide. Nous devons l'écrire comme ceci :
<ion-content overflow-scroll='true'> <div class="selectable">幻灯片1测试文字,试试可以复制</div> </ion-content>
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!