テキストボックスの入力文字をJavaScriptで別エリアに同時にコピー表示する方法

テキストボックスの入力文字をJavaScriptで別エリアに同時にコピー表示する方法をご紹介します。
過去にキャンペーンサイトで入力文字を結果イメージ確認用でプレビューさせる時に使いました。

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

※テキストボックスname=”txt”で入力した文字をname=”copy”にコピーする関数incopy(パラメータ)です。

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

テキストボックスの入力文字を別エリアに同時にコピー表示するHTML記述

※入力エリアのテキストボックス（name=”txt”）と入力テキストのコピー出力先テキストボックス（name=”copy”）を用意します。

<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>

コピー処理はonMouseOut、onMouseOver、onkeydown、onkeyupイベント時に行われる様にしてます。

テキストボックスの入力文字をJavaScriptで別エリアに同時にコピー表示する方法のでもページ

テキストボックスの入力文字をJavaScriptで別エリアに同時にコピー表示する方法のデモ

デフォルトフォントには無いフォント種類をいくつか選択出来て、別エリアにプレビューされる様に出来ると何か使えそうですが、デフォルトフォントには無いフォントをどうやって使うかですかね。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。