人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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でも構いません。

●質問者: kt26
●カテゴリ:ウェブ制作
✍キーワード:HTML JavaScript jQuery STR URL
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● y-kawaz
●15ポイント

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

jQuery(document).ready(function($){
 $('#textarea').bind('keyup change', function() {
 $('#preview').html($(this).val());
 });
});
◎質問者からの返答

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

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

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


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

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

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


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


2 ● kawasaki
●80ポイント ベストアンサー

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

入力の変化を検出するための要素は 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>
◎質問者からの返答

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

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


3 ● Cherenkov
●30ポイント

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

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


<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さんの回答を見て後から思いつきました。コメント欄は開けるのを忘れていました(デフォルトで閉じる設定なので)


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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ