JavaScriptでのクリックでテキストフォームに文字列を入力する例

ショーケース

上の例では「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: 入力欄にクリックされた要素の内部テキストを連結して追加する。