ホームページ > 記事 > ウェブフロントエンド > JavaScript は、ボタンをクリックして指定された領域のテキストをコピーする機能を実装します。
html5 の WebAPI インターフェースは、Flash に依存せずに、ボタンをクリックしてエリアテキストをコピーする機能を、わずか数行のコードで簡単に実現できます。
コードは次のとおりです:
/* 创建range对象 */ const range = document.createRange(); range.selectNode(element); // 设定range包含的节点对象 /* 窗口的selection对象,表示用户选择的文本 */ const selection = window.getSelection(); if(selection.rangeCount > 0) selection.removeAllRanges(); // 将已经包含的已选择的对象清除掉 selection.addRange(range); // 将要复制的区域的range对象添加到selection对象中 document.execCommand('copy'); // 执行copy命令,copy用户选择的文本
テスト:
ブラウザのバージョン番号は、テスト時に使用したバージョンです。
エッジブラウザ、Chrome (v54.0.2840.99m)、Firefox (v49.0.1) が利用可能です。
IE9、IE10、および IE11 では、テキストをクリップボードに貼り付けるかどうかを尋ねるプロンプトが表示されます。
IE7およびIE8はこの機能をサポートしていません。
iOS10のSafariブラウザが利用可能になりました。
フィードバックによると、IOS9未満のSafariブラウザはこの機能をサポートすべきではありません。
デモ:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <article id="article"> <h4>公园一日游</h4> <time>2016.8.15 星期二</time> <p>今天风和日丽,我和小红去了人民公园,玩了滑梯、打雪仗、划船,真是愉快的一天啊。</p> </article> <button id="copy">复制文章</button> <textarea style="width: 500px;height: 100px;" placeholder="试一试ctrl + v"></textarea> <script> function copyArticle(event){ const range = document.createRange(); range.selectNode(document.getElementById('article')); const selection = window.getSelection(); if(selection.rangeCount > 0) selection.removeAllRanges(); selection.addRange(range); document.execCommand('copy'); } document.getElementById('copy').addEventListener('click', copyArticle, false); </script> </body> </html>