FrontEnd/JavaScript
[ JavaScript ] 버튼 클릭 복사 - 기능 구현 예제
SangHoonE
2021. 8. 26. 00:49
안녕하세요. CodeHoon 입니다.
이번에는 자바스크립트의 dom 복사 이벤트를 구현하려고 합니다.
버튼 클릭으로 할 거구요, 다른 이벤트로 자유롭게 해도 무관합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>복사하기 구현</h1>
<textarea name="" id="textArea" cols="30" rows="10"></textarea><br>
<button type="button" id="copyBtn">copy</button>윗부분이구요,
<script>
const textArea = document.querySelector('#textArea')
const copyBtn = document.querySelector('#copyBtn')
copyBtn.addEventListener("click", () => {
textArea.select()
document.execCommand("copy")
})
</script>
</body>
</html>주요 내용입니다.
ID가 textArea인 Textarea 태그를 생성하여 html에 작성합니다.
그리고 그 아래에 ID가 copyBtn인 버튼을 생성하여 html에 작성합니다.
Javascript 부분입니다.
textarea부분과 button의 아이디를 querySelector로 가져와, button 에 이벤트를 생성합니다.
textArea.select()로 textarea 내에 작성한 모든 내용을 선택한다는 뜻이고,
document.exeComand("copy") 로 선택한 내용을 복사한다는 뜻입니다.
이상입니다.
반응형