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でも構いません。
下記のようなコードはご要望を満たしますか?
入力の変化を検出するための要素は 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>
変化を監視するだけならこんな感じでいかがでしょう?
jQuery(document).ready(function($){ $('#textarea').bind('keyup change', function() { $('#preview').html($(this).val()); }); });
これでも良いのですが、以下の2点が気になりました。
・初期値が入っていた場合
・監視するフォーム(の項目)が増えた場合
前者の場合は、window onloadで#textarea内の値をpreviewに渡せば良いと思いますが、後者まで考えると悩んでしまいます。
私が考えたコードでは「str = $('#textarea').val();」の部分を
入力項目毎に増やせば良さそうなので。
少し応用的な事まで求めていますが、お分かりの方は引き続き回答お待ちします。
下記のようなコードはご要望を満たしますか?
入力の変化を検出するための要素は 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>
コードありがとうございます。非常に参考になりました。
要件も満たしております。
>上記コードの指摘かより良い書き方をご存じでしたら、アドバイスお願いします。
以下のページを眺めているだけでいい方法が思いつくこともあります。
<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>
相当リファレンスを眺めてそれでも解決できずに質問しました。仕様に関しては1さんの回答を見て後から思いつきました。コメント欄は開けるのを忘れていました(デフォルトで閉じる設定なので)
と、色々と言い訳しましたが、丁寧にご指摘いただきありがとうございます。
コードありがとうございます。非常に参考になりました。
要件も満たしております。