JavaScript活用ガイド：リアルタイムでテキストボックス入力を別エリアにコピー・表示するテクニック｜DAD UNION

Web開発においてユーザーのインタラクティブな体験を提供することは、サイトの利便性を向上させる重要な要素です。特に、フォームの入力内容をリアルタイムで確認できる機能は、ユーザビリティの高いインターフェース作りに役立ちます。
この記事では、JavaScriptを使用してテキストボックスに入力した文字を、別のエリアに同時にコピーして表示する方法をステップバイステップで解説します。

Contents

なぜこの機能が便利なのか
テキストボックスの入力文字をコピーするJavaScriptの実装
HTMLとJavaScriptの連携
テキストボックスの入力文字をJavaScriptで別エリアに同時にコピー表示する方法のデモページ
まとめ

なぜこの機能が便利なのか

例えば、キャンペーンサイトやオンラインの申込みフォームで、入力内容をその場でプレビューする機能は、エンドユーザーにとって非常に有用です。ユーザーが入力した内容を確認しながら進めることで、入力ミスの減少やフォームの送信後のトラブルを予防できます。

テキストボックスの入力文字をコピーするJavaScriptの実装

まず、ユーザーがテキストボックス（name=”txt”）に入力したデータをリアルタイムで他のエリアにコピーするJavaScriptの関数「incopy(パラメータ)」を作成します。
このコードは、テキストボックスのイベントリスナーに紐づけられ、特定のイベントが発生した際に動作します。

<script type="text/javascript">
function incopy(frmObj){
    frmObj.elements["copy"].value=frmObj.elements["txt"].value;	//name（txt）で入力した文字をname（copy）にコピー
}
</script>

HTMLとJavaScriptの連携

次に、HTMLフォームにおいて、入力されたテキスト（name=”txt”）を即座に他のテキストボックス（name=”copy”）に表示するための設定を行います。ここで、JavaScriptの関数を適切なイベントに割り当てることが重要です。例えば、onkeyupイベントはユーザーがキーを押し上げた瞬間に、入力された文字をコピーするのに適しています。

<form action="#">
    
文字を入力して下さい：<input type="text" value="" onmouseout="incopy(this.form)" onmouseover="incopy(this.form)" onkeydown="incopy(this.form)" onkeyup="incopy(this.form)" name="txt" size="40">

<div style="padding-top:30px;">
    以下に文字が表示されます↓
    <input type="text" value="" readonly="readonly" name="copy" size="40" style="background-color:#ffffff; color:#0099FF; border:1px solid #ffffff; font-size:24px; font-weight:bold; text-align:center;"></div>

</form>