ionic アプリで長押ししてもテキストのコピーや貼り付けができない場合はどうすればよいですか?
Mar 08, 2018 am 09:43 AM今回は、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='true'>
<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('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 中国語 Web サイトの他の関連記事に注目してください。
関連書籍:
Angularjs で mvvm スタイルのタブを実装するには? Case + code
以上がionic アプリで長押ししてもテキストのコピーや貼り付けができない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
人気の記事
人気の記事
ホットな記事タグ
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7306
9
1623
14
1344
46
1259
25
1207
29
Vue でドラッグ アンド ドロップ要素をコピーして移動するにはどうすればよいですか?
Jun 25, 2023 am 08:35 AM
Vue でドラッグ アンド ドロップ要素をコピーして移動するにはどうすればよいですか?
