Was soll ich tun, wenn Text durch langes Drücken in der ionischen App nicht kopiert oder eingefügt werden kann?-js-Tutorial-php.cn

Was soll ich tun, wenn Text durch langes Drücken in der ionischen App nicht kopiert oder eingefügt werden kann?

php中世界最好的语言

Freigeben： 2018-03-08 09:43:59

Original

4446 Leute haben es durchsucht

Dieses Mal erkläre ich Ihnen, was zu tun ist, wenn der Text in der ionischen Anwendung nicht durch langes Drücken kopiert und eingefügt werden kann. Welche Vorsichtsmaßnahmen gibt es, um das Problem zu lösen, das der Text in der ionischen Anwendung nicht kann? durch langes Drücken kopiert und eingefügt werden. Das Folgende ist ein praktischer Fall.

Das Projekt wollte gerade online gehen und stieß auf ein seltsames Problem. Der Text in ionic kann nicht wie eine normale WAP-Seite kopiert und eingefügt werden.

Ich habe offizielle Dokumente und chinesische Websites durchgesehen, aber es gibt keine Erklärung zu diesem Problem.

Die folgende URL ist das erste Ergebnis der Google-Suche:
http://ionichina.com/topic/55d18fff628dd6dc21b07d75
Ich habe hier alle Methoden ausprobiert, aber sie sind nicht ideal.

Später, nach der Suche nach Informationen aus verschiedenen Quellen, wurde dieses Problem gelöst. Teilen Sie es als nächstes mit allen.

Gehe direkt zum Code:

HTML-Teil

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

Nach dem Login kopieren

CSS-Teil

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

Nach dem Login kopieren

JS-Teil

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

Nach dem Login kopieren

pass Wir können dem Code entnehmen, dass wir zuerst overflow-scroll='true' in den HTML-Code einfügen und dann eine benutzerdefinierte Klasse für den Container hinzufügen, in den wir den Text kopieren möchten. Im Code fügen wir '.selectable' hinzu. . In dieser Klasse setzen Sie unseren CSS-Stil ein.

Hier ist zu beachten, dass diese benutzerdefinierte Klasse nicht zu bestimmten Tags von ionic hinzugefügt werden kann. Wie folgt:

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

Nach dem Login kopieren

So zu schreiben ist ungültig. Wir müssen es so schreiben:

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

Nach dem Login kopieren

bedeutet, dass ich es aus diesem Grund nicht richtig geschrieben habe, und es hat gedauert Ich Debugging kann keine Wirkung erzielen. . .

Der letzte Schritt besteht darin, den obigen js-Code in den der Seite entsprechenden Controller zu kopieren.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Verwandte Lektüre:

Wie implementiert man Tabs im MVVM-Stil in Angularjs? Fall + Code

Eine sehr praktische Codesammlung für vue2.0-Projekte

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn Text durch langes Drücken in der ionischen App nicht kopiert oder eingefügt werden kann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!