집 >웹 프론트엔드 >JS 튜토리얼 >ionic 앱에서 길게 눌러 텍스트를 복사하거나 붙여넣을 수 없으면 어떻게 해야 하나요?

ionic 앱에서 길게 눌러 텍스트를 복사하거나 붙여넣을 수 없으면 어떻게 해야 하나요?

php中世界最好的语言원래의: 2018-03-08 09:43:594448검색

이번에는 이온 앱에서 텍스트를 길게 눌러도 복사해서 붙여넣을 수 없는 경우 대처 방법을 알려드리겠습니다. 다음은 실제 사례입니다. 살펴보겠습니다. 프로젝트가 온라인에 올라오려고 할 때 이상한 문제가 발생했습니다. 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=&#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();};
});

코드를 통해 HTML에서 먼저 Overflow-scroll='true'를 추가한 다음 해당 위치에 복사하고 싶습니다. 텍스트 컨테이너에 사용자 정의 클래스를 추가합니다. 코드에 '.selectable'을 추가하고 이 클래스에 CSS 스타일을 설정합니다.

여기서 이 사용자 정의 클래스는 ionic의 특정 태그에 추가될 수 없다는 점에 유의해야 합니다. 다음과 같습니다:

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

이렇게 쓰는 것은 유효하지 않습니다. 다음과 같이 써야 합니다.

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

는 이로 인해 올바르게 작성하지 않았음을 의미하며 오랫동안

디버깅

하면 효과를 얻을 수 없습니다. . . 마지막 단계는 위의 js 코드를 해당 페이지에 해당하는 컨트롤러에 복사하는 것입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!