JavaScript에서 복사 및 붙여넣기 기능을 구현하는 방법
- 藏色散人원래의
- 2021-11-18 15:51:413259검색
javaScript에서 복사 및 붙여넣기 기능을 구현하는 방법: 1. "document.execCommand('copy')" 메서드를 통해 2. ClipboardJS를 통해 콘텐츠를 복사합니다.
이 문서의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
자바스크립트에서 복사 및 붙여넣기 기능을 어떻게 구현하나요?
js에서 복사 및 붙여넣기를 구현하는 두 가지 방법
1. 서문
인터페이스에 복사 기능이 필요해서 하나는 간단한 기록으로 작성했습니다
2. 방법은 두 번째 방법을 추천합니다.
1. 첫 번째 방법
1) document.execCommand('copy')
2)을 통해 프런트 엔드 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>constructor-nodelist</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css"/>
</head>
<body>
<button onclick="copyText('copy_file')">点我复制</button>
<a id="copy_file" href="复制内容" ></a>
<script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
<script>
function copyText(str_file) {
const btn = document.querySelector('.'+str_file);
var copy_val = document.getElementById(str_file)
var copy_file = copy_val.getAttribute("href");
btn.addEventListener('click',() => {
const input = document.createElement('input');
document.body.appendChild(input);
input.setAttribute('value', copy_file);
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
swal("复制成功！","success");
}
document.body.removeChild(input);
})
}
</script>
</body>3), 요약: 주로 클래스를 통해 a 태그를 복사합니다. 그리고 id href, 복사한 내용을 생성된 입력 태그에 넣은 후, 복사 후 입력 태그를 제거하여 직접 사용하시고, js를 수정하시면 됩니다.
4) 문제: 첫 번째 클릭이 적용되지 않고 두 번 클릭해야 하는데 아직 해결되지 않았습니다.
2. 두 번째 방법
1) ClipboardJS를 통해 콘텐츠를 복사합니다. 이 방법을 권장합니다
2) , git 주소:clipboardjs (https://clipboardjs.com/)
3), 프론트엔드 코드는 다음과 같습니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 请自行去git项目下载 js-->
<script src="./clipboard.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css"/>
<script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>
<body>
<button id="btn" data-clipboard-text="str_555" onclick="copyText()">
<span>Copy</span>
</button>
</body>
</html>
<script>
function copyText() {
var btn = document.getElementById('btn');
console.log(btn);
var clipboard = new ClipboardJS(btn);
<!-- var clipboard = new ClipboardJS(btn, {-->
<!-- container: document.getElementById('btn')-->
<!-- });--> 如果你的项目是 bootstrap框架，请使用这个
clipboard.on('success', function(e) {
console.log(e);
swal("复制成功！","success");
clipboard.destroy();
});
clipboard.on('error', function(e) {
console.log(e);
swal("复制失败","error");
clipboard.destroy();
});
}
</script>3), 요약: 문서를 잘 읽어보시기 바랍니다. 이 프로젝트는 여전히 매우 강력하므로 강력히 추천합니다.
4) 문제: 첫 번째 사본이 적용되지 않는 문제도 발생하여 현재 해결되지 않았습니다.
3. 요약
1. 우리 모두는 첫 번째 사본이 적용되지 않는 문제에 직면하여 나중에 문제를 해결했습니다.
2. 구글과 파이어폭스 브라우저만 사용해 보았는데, 다른 브라우저 버전을 사용할 수 없다면 직접 다른 글을 확인하시고 수정도 환영합니다.
추천 학습: "JavaScript 기본 튜토리얼"
위 내용은 JavaScript에서 복사 및 붙여넣기 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!