JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで別のフィールドと同じ値を入力欄に自動入力する方法

Webフォームを作成していると、「1つ目に入力した住所をそのまま2つ目のフィールドにも入れたい」といった場面はよくあります。JavaScriptを使えば、ボタンを1つクリックするだけで、別のフィールドと同じ値を簡単に自動入力できます。本記事では、その具体的な実装方法をサンプルコード付きで解説します。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    input {
        padding: 5px;
        margin: 5px;
        display: block;
    }
    button {
        padding: 3px;
    }
</style>
</head>
<body>
<h1>Autofill a filled textbox same as another</h1>
<input type="text" class="addr" placeholder="address" />
<button class="Btn">Same as above</button>
<input type="text" class="addr" placeholder="address" />
<script>
    let BtnEle = document.querySelector(".Btn");
    let addrEle = document.querySelectorAll(".addr");
    BtnEle.addEventListener("click", () => {
        addrEle[1].value = addrEle[0].value;
    });
</script>
</body>
</html>

実行結果

まず、1つ目のテキストボックスに住所を入力します。

JavaScriptで別のフィールドと同じ値を入力欄に自動入力する方法

続いて「上記と同じ（Same as above）」ボタンをクリックすると…

JavaScriptで別のフィールドと同じ値を入力欄に自動入力する方法

2つ目のテキストボックスに、1つ目と同じ住所が自動的に入力されます。

JavaScriptで別のフィールドと同じ値を入力欄に自動入力する方法

コードの解説

このコードのポイントは以下の3点です。

  • document.querySelector(".Btn") で「上記と同じ」ボタンの要素を取得します。
  • document.querySelectorAll(".addr") で、addr クラスを持つ2つのテキストボックスをNodeListとして取得します。
  • ボタンの click イベントリスナー内で addrEle[1].value = addrEle[0].value; を実行することで、1つ目の入力値を2つ目のフィールドへコピーしています。

この仕組みを応用すれば、「配送先を自宅住所と同じにする」ボタンなど、ユーザーの入力の手間を省き、フォームの使いやすさ（UX）を向上させる機能を簡単に実装できます。

  1. JavaScriptで別のオブジェクトを介してオブジェクトにアクセスする方法

    JavaScriptでは、あるオブジェクトを定義する際に、別のオブジェクトのプロパティやメソッドを参照することで、その値を取得したり、メソッドの実行結果を利用したりすることができます。この記事では、既存のオブジェクト（obj）を介して、新しいオブジェクト（obj2）からプロパティやメソッドにアクセスする方法を、具体的なコード例とともに解説します。押さえておきたいポイントオブジェクトリテラルの中で obj.lastName のように記述すると、その時点での値が新しいオブジェクトにコピーされます。obj.welcome() のようにメソッド名の後に括弧を付けると、オブジェクト定義時にメソッドが即座

  2. JavaScriptでdivの位置を別のdivを基準に設定する方法｜CSS flex-directionの活用

    あるdivを基準にして別のdivの位置を設定・入れ替えたい場合は、CSSのFlexboxレイアウトと「flex-direction」プロパティを使うのが最もシンプルな方法です。Flexboxでは、親要素（コンテナー）に対して子要素の並び順や方向を自由に指定できるため、HTMLの記述順序に左右されずに表示位置をコントロールできます。 CSSスタイルの定義 まずは、以下のようなCSSスタイルを用意します。flex-direction に column-reverse を指定すると、子要素が縦方向に逆順で並びます。 <style>   .demo{