この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


Webプログラミング講座初級 第五回 スクリプトでフォーム部品を操作する~テキストエリア編~

今回はテキストボックスに引き続き、テキストエリア編です。
テキストエリアはテキストボックスを拡張したようなものです。テキストボックスが一行だとすると、テキストエリアは複数行に対応します。

値の取得と設定は基本的にテキストボックスと一緒で「.val()」で取得と設定ができます。
前回と同様にテキストエリアを2つ用意してテキストエリアに入力された値をもう1つのテキストエリアにコピーするコード例です。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<title>テキストエリアのサンプル</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="ja" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	</head>

	<body>

	<h1>テキストエリアのサンプル</h1>
	<br />

	テキストエリア1に入力された値は [ 実行 ] ボタンをクリックするとテキストエリア2に設定されます。<br />
	<br />
	テキストエリア1<br>
	<textarea id="textarea1" cols="45" rows="5"></textarea>
	<br />
	テキストエリア2<br> 
	<textarea id="textarea2" cols="45" rows="5"></textarea>
	<br />
	<input id="run" type="button" value="実行"><br />



	<script type="text/javascript">

		//スクリプトが全て読み込まれたら実行
		$( function() {

			//ボタンがクリックされたら
			$( "#run" ).click( function(){

				//テキストエリア1の内容を取得し変数に代入する
				$text = $( "#textarea1" ).val();

				//アラートを出してみる
				alert( $text );

				//テキストエリア1の内容を消す
				$( "#textarea1" ).val( "" );

				//テキストエリア2の値を変数に代入
				$text2 = $( "#textarea2" ).val();

				//テキストエリア1の値をテキストエリア2の値に改行して追加する
				$text2 = $text2 + "n" + $text;

				//テキストエリア1の内容をテキストエリア2に設定する
				$( "#textarea2" ).val( $text2 );

			});

		});

	</script>

	</body>

</html>

▼サンプル

ポイントとしてはテキストエリアなのでテキストエリア2に追加する際に、改行コードを追加することです。改行コードは特殊文字で「”n”」で扱うことが出来ます。「alert()文」で入力した文字を表示してみると複数行に渡る入力は改行されていることが分かります。改行コードは通常の文字と違って表示はされませんが、入力すると次に来る文を文頭に持ってくる働きがあります。
この他、特殊文字として字下げする際に使うタブ「”t”」などがあります。

次にこのスクリプトを改造して、入力された文字数をカウントしてみます。

関連記事