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

キャンペーンサイトで入力文字を結果イメージ確認用でプレビューさせる時に使いました。

1.JavaScriptの記述

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

上記をヘッダーに記述して下さい。

2.HTMLの記述

<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で別エリアに同時にコピー表示する方法のデモ

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