ホームページ > 記事 > ウェブフロントエンド > ionic アプリで長押ししてもテキストのコピーや貼り付けができない場合はどうすればよいですか?

ionic アプリで長押ししてもテキストのコピーや貼り付けができない場合はどうすればよいですか?

php中世界最好的语言オリジナル: 2018-03-08 09:43:594388ブラウズ

今回は、ionicアプリ内のテキストが長押しでコピー＆ペーストできない場合の対処法について説明します ionicアプリ内のテキストが長押しでコピー＆ペーストできない問題を解決するための注意事項とは何ですか？以下は実際的なケースです。見てみましょう。

プロジェクトがオンラインに移行しようとしていたとき、通常の wap ページのように ionic のテキストをコピーして貼り付けることができませんでした。

公式文書や中国のウェブサイトを調べましたが、この問題についての説明はありません。

次の URL は Google 検索の最初の結果です:
http://ionichina.com/topic/55d18fff628dd6dc21b07d75
ここですべての方法を試しましたが、どれも理想的ではありません。

その後、さまざまなソースから情報を検索した結果、この問題は解決されました。次にみんなと共有しましょう。

コードに直接移動します:

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>

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

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

コードを通して、最初に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 中国語 Web サイトの他の関連記事に注目してください。

ionic アプリで長押ししてもテ​​キストのコピーや貼り付けができない場合はどうすればよいですか?

関連記事

ionic アプリで長押ししてもテキストのコピーや貼り付けができない場合はどうすればよいですか?