이번에는 이온 앱에서 텍스트를 길게 눌러도 복사해서 붙여넣을 수 없는 경우 대처 방법을 알려드리겠습니다. 다음은 실제 사례입니다. 살펴보겠습니다. 프로젝트가 온라인에 올라오려고 할 때 이상한 문제가 발생했습니다. ionic의 텍스트를 일반 wap 페이지처럼 복사하여 붙여넣을 수 없습니다.
공식문서와 중국사이트를 샅샅이 뒤졌지만 이 문제에 대한 설명은 없습니다.
다음 URL은 Google 검색의 첫 번째 결과입니다.
http://ionichina.com/topic/55d18fff628dd6dc21b07d75여기서 모든 방법을 시도했지만 그중 어느 것도 이상적이지 않습니다.
나중에 다양한 출처에서 정보를 검색한 결과 이 문제가 해결되었습니다. 다음에는 모든 사람과 공유하세요.
코드로 직접 이동하세요.
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='true'> <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('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();}; });
코드를 통해 HTML에서 먼저 Overflow-scroll='true'를 추가한 다음 해당 위치에 복사하고 싶습니다. 텍스트 컨테이너에 사용자 정의 클래스를 추가합니다. 코드에 '.selectable'을 추가하고 이 클래스에 CSS 스타일을 설정합니다.
여기서 이 사용자 정의 클래스는 ionic의 특정 태그에 추가될 수 없다는 점에 유의해야 합니다. 다음과 같습니다:
<ion-content class="selectable" overflow-scroll="true">
이렇게 쓰는 것은 유효하지 않습니다. 다음과 같이 써야 합니다.
<ion-content overflow-scroll='true'> <div class="selectable">幻灯片1测试文字,试试可以复制</div> </ion-content>
는 이로 인해 올바르게 작성하지 않았음을 의미하며 오랫동안
디버깅하면 효과를 얻을 수 없습니다. . . 마지막 단계는 위의 js 코드를 해당 페이지에 해당하는 컨트롤러에 복사하는 것입니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 읽기:
Angularjs에서 mvvm 스타일 탭을 구현하는 방법은 무엇입니까? 케이스+코드vue2.0 프로젝트 아주 실용적인 코드 모음위 내용은 ionic 앱에서 길게 눌러 텍스트를 복사하거나 붙여넣을 수 없으면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!