suchen

Heim >Web-Frontend >js-Tutorial >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:551905Durchsuche

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(&#39;article&#39;));
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand(&#39;copy&#39;);
}
document.getElementById(&#39;copy&#39;).addEventListener(&#39;click&#39;, copyArticle, false);
</script>
</body>
</html>


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie JS, um die Eingabetaste auf der Seite zum Absenden des Formulars zu blockierenNächster Artikel：So verwenden Sie JS, um die Eingabetaste auf der Seite zum Absenden des Formulars zu blockieren

In Verbindung stehende Artikel

Mehr sehen