JS에서 클립보드에 텍스트 복사(두 가지 방법)

물론 사용자가 텍스트를 선택하고 복사할 수도 있지만 클릭하여 복사할 수 있는 버튼을 제공하는 것이 더 나은 아이디어(더 나은 UX)인 것 같습니다. 따라서 이 기사에서는 JavaScript를 사용하여 클립보드에 텍스트를 복사하는 방법을 보여 드리겠습니다.

1. 옛날 방식

클립보드에 텍스트를 복사하는 이전 방법은

텍스트 영역 생성(또는 입력)

복사하려는 텍스트를 해당 텍스트 영역에 넣습니다

.

페이지에 텍스트 영역 추가

텍스트 영역에서 텍스트 선택

복사 명령 실행

페이지에서 제거

function copyToClipboard(text){
    const textArea = document.createElement("textarea")
    textArea.value = text

    document.body.appendChild(textArea)

    textArea.focus()
    textArea.select()

    document.execCommand('copy')

    document.body.removeChild(textArea)
}

2. 새로운 방식

최신 브라우저의 경우 navigator.clipboard를 사용하여 텍스트를 복사할 수 있습니다.

function copyToClipboard(text){
    navigator.clipboard.writeText(text)
}

3. 보너스

이제 이 두 가지 접근 방식을 결합하여 최신 브라우저에서 navigator.clipboard를 사용하고 필요할 때 이전 접근 방식으로 대체하는 함수를 만들 수 있습니다.

function copyToClipboard(text){
    if(navigator.clipboard){
        navigator.clipboard.writeText(text)
        return //codes below wont be executed
    }
    const textArea = document.createElement("textarea")
    textArea.value = text

    document.body.appendChild(textArea)

    textArea.focus()
    textArea.select()

    document.execCommand('copy')

    document.body.removeChild(textArea)
}

내 다른 기사와 YouTube 채널을 확인하십시오.

JS로 스크린 레코더를 만들 수 있습니다.

Shuvo ・ 10월 21일 ・ 3분 읽기

#javascript #webdev #tutorial #beginners

폭="710"

높이="399"

src="https://www.youtube.com/embed/mD_QQvJYQAI"

전체화면 허용

로딩="게으른">