자바스크립트 클립보드 가져오기 붙이기 알아볼께요

개발을 하자보니 텍스트 필드의 내용을 클립보드에 복사해서 쓸 일이 생겼습니다 내용자체는 무척 간단하니 잘 따라 해보시기 바라겠습니다. 저도 인터넷에서 소스를 찾아서 타이핑해서 넣었는데 소스자체는 워낙 간단해서 별어려움이 없으실것 같습니다.

 

우선 자바스크립트 클립보드 부분입니다.

function clipboard(){
    holdtext.createTextRange().execCommand("Copy");
}


function pasteboard(){
textRange = document.body.createTextRange()
textRange.moveToElementText(뿌려줄id값)
textRange.execCommand("paste");

}

 

html부분인데요.
 뿌려줄 부분은 DIV태그나 SPAN등 HTML 엘리먼트면 상관이 없습니다. 다만, id이름이 정확하게 명시를 해주셔야 됩니다.

<textarea id=holdtext></textarea>
<button onclick="clipboard();">클립보드로복사</button>
<button onclick="pasteboard();">클립보드에서가져오기</button>

 간단하게 소개를 해드리자면, 텍스트필드에 있는 값을 button의 온클릭이벤트 clipboard 이벤트로서 자바스크립트 클립보드로 복사를 합니다.

 

 

붙여넣기의 경우도 textTange에 메모리에있는 값을 가져와서 특정id에 값을 뿌려주는 스크립트인데요. 그냥 그대로 사용하시면 될것 같네요.

전체적인 코드는 다음과 같습니다.

자바스크립트 클립보드 가져오기 붙이기

<html>
<head>
<script>

function pasteboard(){

textRange = document.body.createTextRange();
textRange.moveToElementText(test);
textRange.execCommand("paste");
}

function clipboard(){
    holdtext.createTextRange().execCommand("Copy");
}

</script>
</head>

<body>

<textarea id="holdtext"></textarea>

<button onclick="clipboard();">클립보드로복사</button>
<button onclick="pasteboard();">클립보드에서가져오기</button>

<textarea id="test"></textarea>

</body>
</html>

sample.html