나무 숲
TIL / Javascript 클립보드로 내용 복사 본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Copy into clipboard example</title>
</head>
<body>
<h1 id="copyText">Click this to Copy!</h1>
<p id="resultText"></p>
</body>
<script type="text/javascript">
(document.querySelector('#copyText').addEventListener('click', (e) => {
try{
const selection = window.getSelection()
const range = document.createRange()
range.selectNodeContents(e.currentTarget)
selection.removeAllRanges()
selection.addRange(range)
document.execCommand('copy')
document.querySelector('#resultText').innerText = 'Success. Try to paste it somewhere'
} catch (ex) {
document.querySelector('#resultText').innerText = `Fail. ${ex}`
}
}))
</script>
</html>
https://alligator.io/js/copying-to-clipboard/
Copying to Clipboard Using Vanilla JavaScript
You're a dozen lines of code away from implementing a copy to clipboard functionality using 0 libraries and just some simple JavaScript.
alligator.io
를 참고.
wooooooood/Today-I-Learned
TIL. Contribute to wooooooood/Today-I-Learned development by creating an account on GitHub.
github.com
를 마이그레이션한 늑낌
728x90
반응형
'Career > 웹' 카테고리의 다른 글
| 눈으로 보는 JavaScript Event Loop (0) | 2020.08.29 |
|---|---|
| 웹 개발의 A-Z (0) | 2020.08.27 |
| ESLint 처음 적용해본 기록 (0) | 2020.08.08 |
| Pure CSS Animation (0) | 2020.06.03 |
| Javascript 로 TDD하기 with Jest (0) | 2020.05.18 |
'Career/웹' Related Articles
more
Comments