ホームページ >ウェブフロントエンド >jsチュートリアル >ZeroClipboard.js は 1 つのフラッシュを使用して複数のテキスト ボックスをコピーします

ZeroClipboard.js は 1 つのフラッシュを使用して複数のテキスト ボックスをコピーします

陈政宽~
陈政宽~オリジナル
2017-06-28 14:43:421766ブラウズ

この記事では、ZeroClipboard.js が 1 つの Flash を使用して複数のテキスト ボックスをコピーする方法を主に詳しく紹介します。興味のある方は参考にしてください。

ZeroClipboard.js は、コピーと貼り付けをサポートするツールです。 -in は正式にバージョン 2.x になりましたが、IE9 より前のブラウザはサポートしていません。互換性が必要な場合は、最初のバージョン 1.0 を使用してください。このバージョンでは IE7 と IE8 に対応しています。今日は主に 1 つの Flash を使用して複数のコピーされたテキストをサポートする方法を紹介します。

通常、場所をコピーする必要がある場合、次のコードを使用して新しいオブジェクトを作成することがほとんどです:



<p id="J_pop_share">
  <input id="J_video_iframe1" value="<iframe src="http://caibaojian.com/book/"></iframe>" />
  <button id="J_copy_btn1">复制</button>
</p>


単一:

var clip = null;//ZeroClipboard.Client对象 
var current_id = null;//当前所在的文本元素id 
//指定ZeroClipboard.swf位置
ZeroClipboard.setMoviePath(location.protocol+"//club.pcauto.com.cn/js/ZeroClipboard.swf"); 
clip = new ZeroClipboard.Client();//创建ZeroClipboard.Client对象 
clip.setHandCursor(true);//鼠标移动到元素上之后显示手型 
clip.glue(&#39;J_copy_btn1&#39;,&#39;J_pop_share&#39;);
clip.setText($(&#39;#J_video_iframe1&#39;).val());
//添加复制成功之后的操作 
clip.addEventListener(&#39;complete&#39;, function() { 
  alert(&#39;复制成功&#39;); 
});


複数ある場合は、 4 つの新しいオブジェクトを作成する Flash オブジェクトはどうでしょうか?試したことがない人は、この記事で別の方法を紹介します。それは、上記のフラッシュに基づいて、別のボタンに移動するときにフラッシュとコピーされたテキストの位置を変更することです。

複数のテキストのHTMLコード:



<p id="J_pop_share">
  <p>
    <input id="J_video_iframe1" value="<iframe src="http://caibaojian.com/book/"></iframe>" />
    <button id="J_copy_btn1" class="btn-copy-text">复制</button>
  </p>
  <p>
    <input id="J_video_iframe2" value="<iframe src="http://caibaojian.com/book/"></iframe>" />
    <button id="J_copy_btn2" class="btn-copy-text">复制</button>
  </p>
  <p>
    <input id="J_video_iframe3" value="<iframe src="http://caibaojian.com/book/"></iframe>" />
    <button id="J_copy_btn3" class="btn-copy-text">复制</button>
  </p>
  <p>
    <input id="J_video_iframe4" value="<iframe src="http://caibaojian.com/book/"></iframe>" />
    <button id="J_copy_btn4" class="btn-copy-text">复制</button>
  </p>
</p>


javascriptコード: 上記のjsに基づいて、ZeroClipboard.jsを使用するときに次のコードを追加します



できないかもしれないたとえば、現在の IE では、コンテンツがポップアップ ウィンドウに配置されているため、最初のコピーは問題ありませんが、2 番目のコピーではエラーが報告され、「そのようなオブジェクトはありません。」 ", 長い間

デバッグ
しましたが、まだ解決できません。その後、ポップアップウィンドウを非表示にしませんでしたが、エラーは報告されませんでした。したがって、フラッシュの非表示と関連しているはずだと思いますポップアップウィンドウの非表示を

絶対配置

に変更し、left:- 9999pxを追加しました。表示時に正しい左の値を配置すると、エラーは報告されません。 以上がこの記事の全内容です。皆様の学習に役立つことを願っています。また、皆様も Script Home をサポートしていただければ幸いです。

以上がZeroClipboard.js は 1 つのフラッシュを使用して複数のテキスト ボックスをコピーしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。