자바스크립트에서 클릭으로 텍스트 폼에 문자열 입력하는 예제

쇼케이스

위 예제에서 “LongText” 또는 “RecentlyUsed"를 클릭하면 입력창에 해당 문자열이 추가된다. 이러한 기능은 사용자가 자주 사용하는 텍스트나 특수문자를 편하게 입력할 수 있도록 할 때 특히 유용하다. 특별히 문자열이 들어갈 이유는 없기 때문에 원리를 이해했다면 다양한 기능으로 응용할 수 있다.

코드

HTML

<div class="pick">LongText</div>
<div class="pick">RecentlyUsed</div>

<input type="text" id="prompt">

• class="pick": 클릭 가능한 요소를 나타낸다.
• id="prompt": 텍스트가 입력되어서 받아줄 입력창을 지정한다.

javascript

<script>
  document.querySelectorAll(".pick").forEach(element => {
    element.addEventListener("click", function() {
      const inputValue = this.textContent; // 클릭된 요소의 텍스트 가져오기
      document.getElementById("prompt").value += inputValue;
    });
  });
</script>

• querySelectorAll(".pick"): 클래스가 “pick"인 요소를 대상으로 삼는다.
• addEventListener("click", ...): 클릭 이벤트가 발생했을 때 실행할 함수를 지정한다.
• inputValue = this.textContent: 클릭된 요소의 내부의 텍스트를 가져온다. 속성이 아니라 컨텐츠 그 자체기 때문에 사용자에게 보여주는 것도 간단하다.
• getElementById("prompt").value += inputValue: 입력창에 클릭된 요소의 내부 텍스트를 이어 붙인다.