고정 헤더 영역
상세 컨텐츠
본문
반응형
안녕하세요. 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") 로 선택한 내용을 복사한다는 뜻입니다.
이상입니다.
'FrontEnd > JavaScript' 카테고리의 다른 글
| [ Html, Css, Javascript ] Spinner / Loading Screen 만들기 / 로딩 화면 만들기 (0) | 2021.10.06 |
|---|---|
| [ jQuery ] jQuery 제이쿼리 CDN 링크 공유 (0) | 2021.10.06 |
| [ JavaScript ] 드림코딩 클론코딩, 짧고 간단한 쇼핑 웹앱 구현, 예제 (0) | 2021.09.09 |
| [ JavaScript ] Split 예제, 자바스크립트 문자열 나누기 (0) | 2021.09.06 |
| [ JavaScript ] 키보드 구현 - cdn 사용하기 (0) | 2021.08.31 |
댓글 영역