明るく

暗く

テキストボックスの値を別のテキストボックスへ反映させる方法

2024.1.10

2024.5.10

本記事では、JavaScriptを使って「テキストボックスに入力した値を、別のテキストボックスへ反映させる方法」について解説します。

JavaScript実装後のテキストボックス

コードの役割・使い方について１行ずつ丁寧に説明しています。

コードの入力手順

HTML・CSSでテキストボックスを作成する

index.htmlのファイルを作成し、以下のコードを入力しましょう。

※OS環境はMacOS、エディタはVisual Studio Codeを使用

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>テキストボックスの値を、別のテキストボックスへ反映させる</title>
 <style type="text/css">
   .area {
    text-align: center;
    font-size: 18px;
   }
   .mt40{
    margin-top: 40px;
   }
   .textbox {
    padding: 10px 10px;
    font-size: 18px;
   }
 </style>
</head>
<body>
 <main>
  <div class="container">
   <div class="area">
    <p>文字を入力する場所</p>
    <p><input type="text" size="30" placeholder="文字を入力してください" class="textbox"></p>
   </div>
   <div class="area mt40">
    <p>文字を自動で反映させる場所</p>
    <p><input type="text" size="30" placeholder="文字が自動で現れます" readonly="readonly" class="textbox"></p>
   </div>
  </div>
 </main>
</body>
</html>

すると、以下のような入力画面が現れます。

現時点では、上段のテキストボックスに文字を入力しても下段のテキストボックスには何の変化もありません。

JavaScript実装前のテキストボックス

上段のテキストボックスの内容を下段のテキストボックスへ反映させるために、JavaScriptのコードを実装します。

JavaScriptで自動反映の機能を実装する

以下の通り、6行目のinptタグ内に id=”inputBox” を、10行目の同じ位置に id=”outputBox” を、14～20行目のすべてを追加します。

<body>
 <main>
  <div class="container">
   <div class="area">
    <p>文字を入力する場所</p>
    <p><input id="inputBox" type="text" size="30" placeholder="文字を入力してください" class="textbox" ></p>
   </div>
   <div class="area mt40">
    <p>文字を自動で反映させる場所</p>
    <p><input  id="outputBox" type="text" size="30" placeholder="文字が自動で現れます" readonly="readonly" class="textbox" ></p>
   </div>
  </div>
 </main>
 <script type="text/javascript">
  const inputBox = document.getElementById("inputBox");
  const outputBox = document.getElementById("outputBox");
  inputBox.addEventListener("input", function () {
    outputBox.value = inputBox.value;
  });
 </script>
</body>

すると、上段のテキストボックスの文字が、下段のテキストボックスに自動的に反映されるようになります。

JavaScript実装後のテキストボックス

続いて、自動で反映させるための実装手順と使用する関数の意味について説明します。

テキストボックス値を自動で反映させるための実装手順と解説

テキストボックス値を自動反映させるために必要な、HTMLの追加設定からJavaScriptの入力までの手順を解説します。

1.HTML内にIDを設定する

JavaScriptがテキストボックスの値を取得・反映できるようにIDを設定しましょう。

<div class="area">
 <p>文字を入力する場所</p>
 <p><input id="inputBox" type="text" size="30" placeholder="文字を入力してください" class="textbox" ></p>
</div>
<div class="area mt40">
 <p>文字を自動で反映させる場所</p>
 <p><input  id="outputBox" type="text" size="30" placeholder="文字が自動で現れます" readonly="readonly" class="textbox" ></p>
</div>

任意のID名で構いません。

ここでは、上段のテキストボックスにはid=”inputBox”を、下段のテキストボックスにはid=”outputBox”を、それぞれ設定します。

2.変数を設定する

今回はHTML内にJavaScriptを組み込むため、 </main>の下に<script type=”text/javascript”> 〜 </script>を入力します。

 </main>
<script type="text/javascript">

</script>
</body>

id=”inputBox”の値を、変数 inputBoxとして宣言します。
そして、id=”outputBox”の値も同様に、変数 outputBoxとして宣言します。

 </main>
<script type="text/javascript">
 const inputBox = document.getElementById("inputBox");
 const outputBox = document.getElementById("outputBox");
</script>
</body>

解説：const

設定した変数が、「定数（constant）」であることを宣言します。

定数とは、「再宣言」「再代入」など値を変更できないことが特徴です。
今回は、そもそも変数の内容を変える必要がないことから、“const”を選択しました。

解説：document.getElementById(“ID名”)

「”document”オブジェクトの”getElementById”メソッドを使って(“ID名”の)要素を取得する」ことを表しています。

“document “オブジェクトとは、HTML要素から値を取得する役割があります。

そして、どのように値を取るかを設定するのがメソッドです。

今回は、id=”inputBox”およびid=”outputBox”を用いて値を取得・設定することから、IDの値を取得するメソッド：”getElementById()”を選択します。
()内に”ID名”を入れることで、対象のIDを指定しましょう。

3.処理内容を設定する

「変数 inputBox （テキストボックス上段）に文字が入力されたとき、どのような処理を行うか」を設定するための枠組みを作ります。

<script type="text/javascript">
 const inputBox = document.getElementById("inputBox");
 const outputBox = document.getElementById("outputBox");
 inputBox.addEventListener("input", function () {

 });
</script>

解説：要素.addEventListener(“イベント”, function () { 処理内容 });

addEventListenerは、「ある要素に特定のイベントが発生した場合、どのような処理をさせるか」を設定するメソッドです。

inputBox.addEventListener(“input”, function () {
outputBox.value = inputBox.value;
});

上記の場合だと、「変数 inputBox に、”input”イベントが発生した時に、”outputBox.value = inputBox.value;” の処理が行われる」ことがわかります。

また、“input”は、「input要素内に文字が入力されたとき発生するイベント」です。
イベントには他にも、クリック時に発生する”click”、スクロール時に発生する”scroll”scroll”など、さまざまな種類があります。

①で作成した枠組みの中に、「変数 outputBox （テキストボックス下段）に、変数 inputBox （テキストボックス上段）の値を代入する」ための計算式を設定します。

<script type="text/javascript">
 const inputBox = document.getElementById("inputBox");
 const outputBox = document.getElementById("outputBox");
 inputBox.addEventListener("input", function () {
   outputBox.value = inputBox.value;
 });
</script>

これで、「変数 inputBox（テキストボックス上段）に変化があった時に、変数 outputBox（テキストボックス下段）に変数 inputBoxの内容を自動で反映させる」ことが可能になりました。

解説：要素.value

要素の値を取得・設定するための属性です。

outputBox.value = inputBox.value;

上記の場合だと、「変数“outputBox”の値に、変数”inputBox”の値が代入される」ことがわかります。
また、“=” は代入演算子であり、右側の値を左側の値に代入する役割があります。
「イコール（等しい）」ではないので気をつけましょう。

4.動作確認をおこなう

上段のテキストボックスに入力した内容が、下段のテキストボックスに自動的に反映されるようになります。

JavaScript実装後のテキストボックス

まとめ

HTML・JavaScriptを以下のように設定すると、テキストボックスに入力した値が別のテキストボックスに反映されます。

HTMLの「テキストボックス（inputタグ内）」に、IDを設定する
“getElementById”メソッドを使って取得したIDの値を、変数として宣言する
”addEventListener”メソッドを使って、テキストボックスに入力があった時に、もう片方のテキストボックス同じ値を代入する

問い合わせフォームなど、さまざまな場面で応用できるので、ぜひお試しください。

JavaScript

addEventListenerを使用する時の注意点とエラーの解決方法

2024.5.9

ブログトップへ

テキストボックスの値を別のテキストボックスへ反映させる方法

コードの入力手順

HTML・CSSでテキストボックスを作成する

JavaScriptで自動反映の機能を実装する

テキストボックス値を自動で反映させるための実装手順と解説

1.HTML内にIDを設定する

2.変数を設定する

3.処理内容を設定する

4.動作確認をおこなう

まとめ

関連記事

addEventListenerを使用する時の注意点とエラーの解決方法

カテゴリ一覧

最新記事

【初めてでも安心】プロジェクト計画の基本と成功へのステップガイド

【初心者必見】システム設計の基本から学ぶ！成功するプロジェクトの秘訣

【Googleフォームをカスタマイズ】完了画面（サンクスページ）の編集方法

アジャイル開発とウォーターフォール開発の違い：初心者にもわかりやすいシステム開発の選び方

addEventListenerを使用する時の注意点とエラーの解決方法

Djangoのstaticフォルダの読み込み順序｜共通ファイルの場所はどこが適切か