Javascript(jQuery)でフォームの値が変更されたら処理する物を作っています。


jQuery(document).ready(function($){
dataOld="";

function preview(){
str = $('#textarea').val();//テキストエリアの値を取得
if(str != dataOld){
$('#preview').html(str);
dataOld = str;
}
}
window.onload=function(){
setInterval("preview()",500);
}
});

タイマーでフォームの値を取得するpreviewを常に監視して、フォームの値が変更されたら
ページ内の<div id="preview"></div>に変更内容を表示するというものです。

それで上記のようなコードを書いたのですが、previewの内容が表示されませんし、
そもそもタイマーで監視するような方法が正しいのかもわかりません。

上記コードの指摘かより良い書き方をご存じでしたら、アドバイスお願いします。参考URLでも構いません。

回答の条件
  • 1人2回まで
  • 登録:
  • 終了:2010/02/08 17:53:16
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:phero No.2

回答回数55ベストアンサー獲得回数9

ポイント80pt

下記のようなコードはご要望を満たしますか?

入力の変化を検出するための要素は id を t_xxx という値にしてみました。

IE6だと改行コード"\n"の部分がうまく動きませんが、

FireFox3.5とChrome4.0で動作確認済みです。

<body>
	<form id="main">
		<textarea id="t_textarea"></textarea>
		<textarea id="t_hoge"></textarea>
		<textarea id="preview"></textarea>
	</form>
	
	<script type="text/javascript">
		function preview() {
			var output = "";
			var targets = $("[id^=t_]");
			for (var i = 0; i < targets.length; i++) {
				output += targets[i].value + "\n";
			}
			$("#preview").html(output);
		}
		jQuery(document).ready(function($){
			$("[id^=t_]").bind('keyup change', function() {
				preview();
			});
		});
	</script>
</body>
id:kt26

コードありがとうございます。非常に参考になりました。

要件も満たしております。

2010/02/08 17:49:14

その他の回答2件)

id:y-kawaz No.1

回答回数1422ベストアンサー獲得回数226

ポイント15pt

変化を監視するだけならこんな感じでいかがでしょう?

jQuery(document).ready(function($){
  $('#textarea').bind('keyup change', function() {
    $('#preview').html($(this).val());
  });
});
id:kt26

これでも良いのですが、以下の2点が気になりました。

・初期値が入っていた場合

・監視するフォーム(の項目)が増えた場合


前者の場合は、window onloadで#textarea内の値をpreviewに渡せば良いと思いますが、後者まで考えると悩んでしまいます。

私が考えたコードでは「str = $('#textarea').val();」の部分を

入力項目毎に増やせば良さそうなので。


少し応用的な事まで求めていますが、お分かりの方は引き続き回答お待ちします。

2010/02/07 17:25:00
id:phero No.2

回答回数55ベストアンサー獲得回数9ここでベストアンサー

ポイント80pt

下記のようなコードはご要望を満たしますか?

入力の変化を検出するための要素は id を t_xxx という値にしてみました。

IE6だと改行コード"\n"の部分がうまく動きませんが、

FireFox3.5とChrome4.0で動作確認済みです。

<body>
	<form id="main">
		<textarea id="t_textarea"></textarea>
		<textarea id="t_hoge"></textarea>
		<textarea id="preview"></textarea>
	</form>
	
	<script type="text/javascript">
		function preview() {
			var output = "";
			var targets = $("[id^=t_]");
			for (var i = 0; i < targets.length; i++) {
				output += targets[i].value + "\n";
			}
			$("#preview").html(output);
		}
		jQuery(document).ready(function($){
			$("[id^=t_]").bind('keyup change', function() {
				preview();
			});
		});
	</script>
</body>
id:kt26

コードありがとうございます。非常に参考になりました。

要件も満たしております。

2010/02/08 17:49:14
id:Cherenkov No.3

回答回数1504ベストアンサー獲得回数493

ポイント30pt

>上記コードの指摘かより良い書き方をご存じでしたら、アドバイスお願いします。

  • var、letを使って変数宣言する。
  • タイマーよりもイベントリスナーを使う。
  • jQuery(document).readyの中でwindow.onloadは意味がない。jQuery(callback)
  • setIntervalには文字列ではなくて関数を渡す。
  • コメント欄を有効にしましょう。
  • コードを書き始める前に何をしたいのか概要を決めて、なるべく仕様を書いて質問する。どんな用途で使うのか、将来どのように拡張するのか。
  • フォームの入力はtextareaだけか、入力と出力は何個でどのように表示したいのか、textareaの内容はサーバに送るのか、どのような形式だとうれしいのか。

以下のページを眺めているだけでいい方法が思いつくこともあります。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="./jquery-latest.js"></script>
<script>
$(function(){
  //初期値を表示するように
  var pre_data = $("#A");
  $("#preview").html("<p>"+pre_data.attr("id")+"</p>"+pre_data.val());

  $(".target").bind("keyup change click",function(){
    var self = $(this)
    $("#preview").html("<p>"+this.id+"</p>"+self.val());
  });
});

</script>
</head>
<body>
<form>
<textarea id="A" class="target"><img src="http://q.hatena.ne.jp/images/logo_hatena.gif"></textarea>
<textarea id="B" class="target"><img src="http://q.hatena.ne.jp/images/logo_question.gif"></textarea>
<textarea id="C" class="target"><img src="http://d.hatena.ne.jp/barcode?str=http://q.hatena.ne.jp%2fmobile%2f1265517815"></textarea>
</form>
<div id="preview"></div>
</body>
</html>
id:kt26

相当リファレンスを眺めてそれでも解決できずに質問しました。仕様に関しては1さんの回答を見て後から思いつきました。コメント欄は開けるのを忘れていました(デフォルトで閉じる設定なので)


と、色々と言い訳しましたが、丁寧にご指摘いただきありがとうございます。

2010/02/08 17:52:11

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません