writeText 메소드는 복사 될 인수로 텍스트를 사용합니다

[gyun님]

여기에서는 JavaScript를 사용하여 텍스트를 클립보드에 복사하는 방법을 보여 드리겠습니다 .

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

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

<style>
@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;
}


</style>
<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.xxonclick = 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>

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