ionic应用里文字不能长按复制、粘贴怎么办-tutorial js-php.cn

ionic应用里文字不能长按复制、粘贴怎么办

php中世界最好的语言

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

asal

4388 orang telah melayarinya

这次给大家带来ionic应用里文字不能长按复制、粘贴怎么办，解决ionic应用里文字不能长按复制、粘贴的注意事项有哪些，下面就是实战案例，一起来看一下。

项目临近上线，遇到了奇葩问题，ionic中的文字是无法像普通wap页面一样复制粘贴的。

翻了翻官方文档和中文网站，都没有对这个问题的说明。

以下网址是谷歌搜索第一条的结果：
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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

通过代码我们可以看到，首先在html中,添加overflow-scroll='true'，然后在我们想要复制文字的容器上，添加自定义类，代码中我们添加的是'.selectable' ，在这个类上设置我们的css样式。

这里需要注意的是，这个自定义类，不能加在ionic的特定标签上。如下：

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

Salin selepas log masuk

这样写，是无效的，我们必须这样写：

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

Salin selepas log masuk

表示我就是因为这个没写对，调试了半天出不来效果。。。

最后一步就是在页面对应的controller里面拷贝如上js代码。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

ionic应用里文字不能长按复制、粘贴怎么办