[자바스크립트] 입력 창 안의 텍스트 클립보드 복사 기능 구현하기

 입력 창 안의 텍스트를 사용자가 클립보드에 복사할 수 있게 하는 기능은 매우 유용합니다. 가장 대표적인 목적을 예로 들자면, 자신의 웹사이트 이용자에게 웹사이트 공유를 부탁하며 링크를 편하게 복사할 수 있도록 해줄 수도 있습니다.

 제가 만든 웹사이트의 경우, 사용자가 직접 입력 창을 필요한 문자로 채우고 이를 복사해서 필요한 곳에 사용할 수 있게 하였습니다. 아래 캡쳐 화면을 보시면 이해가 쉬울 것입니다. 나열된 문자 중 필요한 문자를 클릭하면 상단의 입력 창에 모여서 글 복사 버튼을 누르면 알림이 뜨는 방식입니다.

포스팅 내에 입력 창과 이 입력 창 안의 텍스트를 복사할 수 있도록 하는 버튼을 직접 구현해 보겠습니다. 코드는 그 아래에 적어 놓을테니 마음에 드신다면 가져 가서 쓰시면 되겠습니다.

복사 버튼을 활용하는 데에는 대표적으로 두 가지 경우가 있을 것 같습니다. 입력 창이 비어져 있어서 웹 사용자가 직접 입력 창을 채우고 복사해 가는 경우, 그리고 개발자가 미리 입력 창에 원하는 텍스트를 채워 놓고, 사용자는 이 텍스트를 그대로 복사해 가는 경우.

전자의 경우를 먼저 알아 보겠습니다.

입력 창 안에 원하는 텍스트를 직접 입력하고 글 복사 버튼을 클릭해 보세요. 버튼 안의 텍스트도 직접 정할 수 있습니다.

위 기능의 코드는 아래와 같습니다.

.html 파일

<input id="something" name="Subject" size="40" type="text" /><br /><br /><button onclick="myFunction()">

.js 파일

function myFunction() {

    var copyText = document.getElementById("something");

    copyText.select();

    copyText.setSelectionRange(0, 99999); 

    document.execCommand("copy");

    alert("클립보드에 복사되었습니다: " + copyText.value);

  }

SelectionRange는 모바일 이용자를 위한 코드입니다.

이번에는 후자의 경우 즉, 개발자가 입력 창에 텍스트를 먼저 채워 놀은 경우를 알아 보겠습니다.

어쩔수 블로그는 제 블로그의 이름입니다.

위 기능을 구현한 코드는 기존 코드에 value 값만 추가하면 됩니다.

script는 똑같으므로, html이 변형된 코드만 적겠습니다.

<input id="something" name="Subject" size="40" type="text" value="어쩔수 블로그" /><br /><br /><button onclick="myFunction()">