[javascript] 입력 폼에서 값 복사 기능 추가하기
텍스트 입력 폼에서 사용자가 입력한 값을 다른 곳에도 복사하고 싶다면 JavaScript를 사용하여 이 기능을 쉽게 추가할 수 있습니다. 이 기능을 추가하려면 HTML과 JavaScript를 사용하여 입력된 값을 가져와 복사하는 스크립트를 작성하면 됩니다.
HTML 입력 폼
우선, HTML 입력 폼을 만들어보겠습니다.
<input type="text" id="inputField" value="Example Text">
<button onclick="copyText()">Copy Text</button>
JavaScript로 값 복사 함수 구현
다음으로, JavaScript 코드를 사용하여 입력된 값 복사 기능을 구현해보겠습니다.
function copyText() {
var inputField = document.getElementById('inputField');
inputField.select();
document.execCommand('copy');
alert('Text copied to clipboard');
}
동작 방법
사용자가 입력 폼에 텍스트를 입력한 후 “Copy Text” 버튼을 클릭하면, 해당 텍스트가 클립보드로 복사됩니다. 이제 다른 곳에서 붙여넣기(ctrl+v 또는 cmd+v)를 통해 복사한 텍스트를 사용할 수 있습니다.
이렇게하면 사용자가 입력한 값을 복사할 수 있으며, 웹 페이지 상에서 더 나은 상호작용이 가능해집니다.
위의 예시는 간단한 형태의 입력 폼 값 복사 스크립트이지만, 더 많은 사용자 경험을 더하고자 한다면 디자인 및 보안 이슈를 고려하여 보다 신중한 구현이 요구될 수 있습니다.