clipboard使用まとめ

20371 ワード

テクニック先端開発 clipboard使用 jsコピーテキスト移動先でテキストをコピーします。 h 5コピーテキスト h 5テキストをクリップボードにコピーします。

(1)紹介:clipboard.jsは、軽量級のテキストをクリップボードにコピーする機能を実現するJavaScriptプラグインである.入力ボックス、テキストドメイン、DIV要素のテキストなどのテキストコンテンツをクリップボードにコピーすることができます.clipboard.jsは、主流をサポートするブラウザです.
(2)clipboardで内容をコピーする方法はありますか?

は、chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+から対象コンテンツをコピーする

コピーするコンテンツtarget

コピーの内容は属性によって戻ります.
ターゲットコンテンツをtargetコピーします.ここでは言いません.functionと属性の操作を教えてください.
(3)Functionの操作は2つあります.
一つ目は、targetのfunctionでコンテンツをコピーし、targetによってコピーするノードを指定し、ここで舒値を返します.

   <button class="btn">Copy_target</button>
   <div>hello</div>

   <script>
   var clipboard = new Clipboard('.btn', {
   //   target        
       target: function() {
                  return document.querySelector('div');
             }
   });

   clipboard.on('success', function(e) {
       console.log(e);
   });

   clipboard.on('error', function(e) {
       console.log(e);
   });
   </script>

第二種類:
textのfunctionでコンテンツtextのfunctionで指定されたコピー内容をコピーし、ここで「to be or not to be」に戻ります.

<button class="btn">Copy</button>
<script>
   var clipboard = new Clipboard('.btn', {
   //   copy  ，    text         
       text: function() {
           return 'to be or not to be';
       }
   });

   clipboard.on('success', function(e) {
       console.log(e);
   });

   clipboard.on('error', function(e) {
       console.log(e);
});

(4)属性によりコピーの内容を返す
第一種類:シングルノード
ノードオブジェクトをIDで指定し、パラメータとしてClip boardに転送します.ここの戻り値の内容はdata-clipboard-textの内容です.

//   id    data-clipboard-text    
<div id="btn" data-clipboard-text="1">
        <span>Copy</span>
</div>
 
<script>
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);
 
    clipboard.on('success', function(e) {
        console.log(e);
    });
 
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>

第二種類:マルチノード
すべてのbuttonボタンをclassで取得し、パラメータとしてClip boardに転送します.各ボタンをクリックした場合、戻り値の内容は、それぞれ1,2,3のdata-clipboard-textの内容です.

//     class    button，  data-clipboard-text  
<button class="btn" data-clipboard-text="1">Copy</button>
    <button class="btn" data-clipboard-text="2">Copy</button>
    <button class="btn" data-clipboard-text="3">Copy</button>
 <script>
    var clipboard = new Clipboard('.btn');
 
    clipboard.on('success', function(e) {
        console.log(e);
    });
 
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

(5)関数と属性の互換性
関数:

//ClipboardJS.isSupported()　　//--------   ：    
var clipboard = new Clipboard('.btn');
//    :safari    >=10,      ;           ，    “  ”    
clipboard.on('success', function(e) {
    alert('    !')
    e.clearSelection();
});
clipboard.on('error', function(e) {
    alert('   “  ”    !')
//    alert，      “  ”  ，              ，        ，    。                      , οnclick=""   ios     on  
});

属性:

<img
   src="../../../../assets/images/zuop_award/copy_link.png"
      @click="copy"
      data-clipboard-action="copy"
      class="email"
      :data-clipboard-text="'[email protected]'"
    /> 

-------------------
  copy() {
     var clipboard = new Clipboard(".email")
     // console.log(clipboard);
     clipboard.on("success", e => {
       // console.log("    ", e);
       Toast({
         message: "    "
       })
       //     
       clipboard.destroy()
     })
     clipboard.on("error", e => {
       //      
       Toast({
         message: "           "
       })
       console.log("           ")
       //     
       clipboard.destroy()
     })
   }

EasyUi Datagridの使用紹介(1)