【javascript】入力したデータを複数の箇所に反映(挿入)する

textareaに打ち込んだデータを他の箇所(タグ内)に反映(挿入)する方法です。

サンプル

○javascript

<script>
function Textput(tovalue,forclass){/*←Textput([挿入するデータ],[対象のclass名])*/
	var targetclassarray = document.getElementsByClassName(forclass);
	for(var i=0;i<targetclassarray.length; i++){
		targetclassarray[i].innerHTML = tovalue;/*←対象に値を挿入*/
	}
}
</script>

○HTML

<!-- ↓入力エリア キーが押されるたびにTextput関数を呼んで全ての対象に入力しているデータを挿入する-->
<textarea id="ToArea" onkeyup="Textput(this.value,'PutArea');" value=""></textarea>
<hr />
<!-- ↓対象エリア1 -->
divエリア1<br />
<div class="PutArea">
</div>
<hr />
<!-- ↓対象エリア2 -->
divエリア2<br />
<div class="PutArea">
</div>

入力されたデータと対象のclassをonkeyupで関数に渡します。
関数Textputで対象を取得(
NodeList型 )してループ処理で反映します。
リアルタイムで複数箇所に反映が出来ます。

つまづいたのはclassを取得する時は
NodeList型 になっているというところです。
よってfor文を使って全ての対象に反映する処理が入ります。

kaito

WebデザインやWebシステムを作成しています。SEO関連の話しもしていきます。

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください