집 > 기사 > 웹 프론트엔드 > JavaScript는 버튼을 클릭하여 지정된 영역의 텍스트를 복사하도록 구현합니다.

JavaScript는 버튼을 클릭하여 지정된 영역의 텍스트를 복사하도록 구현합니다.

高洛峰원래의: 2016-12-05 13:09:551882검색

html5의 webAPI 인터페이스는 플래시에 의존하지 않고도 단 몇 줄의 코드만으로 버튼을 클릭하여 영역 텍스트를 복사하는 기능을 쉽게 구현할 수 있습니다.

코드는 다음과 같습니다.

/* 创建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(&#39;copy&#39;); // 执行copy命令，copy用户选择的文本

테스트:

브라우저 버전 번호는 제가 사용했던 버전입니다. 테스트.

엣지 브라우저, 크롬(v54.0.2840.99m), 파이어폭스(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(&#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>

성명：

이전 기사：JS를 사용하여 양식을 제출하는 페이지에서 Enter 키를 차단하는 방법다음 기사：JS를 사용하여 양식을 제출하는 페이지에서 Enter 키를 차단하는 방법

JavaScript는 버튼을 클릭하여 지정된 영역의 텍스트를 복사하도록 구현합니다.

관련 기사