vaScript를 사용하여 텍스트를 클립보드에 복사하는 방법은 무엇입니까?

[gyun님]

Copy Text Content To Clipboard - HTML CSS & Javascript

https://www.devbabu.com/copy-text-to-the-clipboard-using-javascript/

vaScript를 사용하여 텍스트를 클립보드에 복사하는 방법은 무엇입니까?
찬단 투두찬단 투두2023년 2월 28일방법 , 자바스크립트
여기에서는 JavaScript를 사용하여 텍스트를 클립보드에 복사하는 방법을 보여 드리겠습니다

navigator.clipboard API 의 JavaScript writeText() 메소드 는 텍스트를 클립보드에 복사하는 데 사용됩니다.

writeText 메소드는 복사 될 인수로 텍스트를 사용합니다 . 구문은 다음과 같습니다.

통사론

코드 복사
//the text "Hi" will be copied
navigator.clipboard.writeText("Hi")
이 writeText 메소드는 비동기식 이므로 promise를 반환합니다 .


코드 복사
navigator.clipboard.writeText(value).then(() => {
    console.log('Text copied to clipboard');
}).catch((err) => {
    console.log('Failed to copy', err);
});
JavaScript를 사용하여 텍스트를 클립보드에 복사
다음은 버튼을 클릭하여 입력 필드의 텍스트를 복사 할 수 있는 클립보드에 복사하는 예 입니다 .

JS를 사용한 HTML

코드 복사
<h1>Copy Text to the Clipboard</h1>
<div class="container">
    <div class="wrapper">
        <span class="msg">Copied</span>
        <input type="text" id="field" value="Hi, How are you?">
        <button id="btn">Copy</button>
    </div>
</div>
<script>
    const copyBtn = document.getElementById('btn');
    const inputField = document.getElementById('field');
    const flashMsg = document.querySelector('.msg');
    copyBtn.xxxxonclick = function(){
        const value = inputField.value;
        navigator.clipboard.writeText(value)
        .then(() => {
            if(!flashMsg.classList.contains('show-msg')){
                flashMsg.classList.add('show-msg');
                setTimeout(() => {
                flashMsg.classList.remove('show-msg');
                },2000)
            }
        }); 
    }
</script>
CSS

코드 복사
@import‎ url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
  line-height: 1.5em;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: 
#f7f7f7;
  color: 
#222222;
}

body,
input, button {
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
}

h1 {
  text-align: center;
  padding: 20px;
}

.wrapper {
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  gap: 5px;
  position: relative;
}

.msg {
  position: absolute;
  top: -30px;
  left: 0;
  background-color: 
#222222;
  border-radius: 30px;
  padding: 1px 10px;
  color: 
#fcfcfc;
  font-size: 14px;
  opacity: 0;
  visibility: hidden;
  translate: 0 24px;
  transition: 0.2s;
}

.show-msg {
  visibility: visible;
  translate: 0 0;
  opacity: 1;
}

#field, #btn {
  padding: 10px;
  border: 1px solid 
#bbb;
  border-radius: 3px;
  outline: none;
}
#field:hover, #field:focus, #btn:hover, #btn:focus {
  border-color: 
#222222;
}

#field {
  flex: 1;
}

#btn {
  cursor: pointer;
}
# 자바스크립트 방법
관련 게시물
Node.js와 JavaScript의 차이점
Node.js와 JavaScript의 차이점
2023년 12월 14일
HTML, CSS, JavaScript를 이용한 OTP 입력 필드
HTML, CSS, JavaScript를 사용하여 OTP 입력 필드를 구축하는 방법
2023년 11월 26일
자바스크립트 호이스팅
JavaScript 호이스팅 이해하기: 작동 방식 이해하기
2023년 11월 25일