Heim > Artikel > Web-Frontend > JavaScript implementiert das Klicken auf eine Schaltfläche, um Text in einem bestimmten Bereich zu kopieren
JavaScript implementiert das Klicken auf eine Schaltfläche, um Text in einem bestimmten Bereich zu kopieren
- 高洛峰Original
- 2016-12-05 13:09:551824Durchsuche
Die WebAPI-Schnittstelle von HTML5 kann problemlos mit nur wenigen Codezeilen die Funktion des Klickens auf eine Schaltfläche zum Kopieren von Bereichstext realisieren, ohne auf Flash angewiesen zu sein.
Der Code lautet wie folgt:
/* 创建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用户选择的文本
Test:
Die Versionsnummer des Browsers ist die Version, die ich wann verwendet habe Testen.
Edge-Browser, Chrome (v54.0.2840.99 m), Firefox (v49.0.1) sind verfügbar.
IE9, IE10 und IE11 werden eine Eingabeaufforderung anzeigen, in der Sie gefragt werden, ob der Text in die Zwischenablage eingefügt werden soll.
IE7 und IE8 unterstützen diese Funktion nicht.
Safari-Browser für IOS10 ist verfügbar.
Laut Feedback sollten Safari-Browser unter IOS9 diese Funktion nicht unterstützen.
Demo:
<!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>