28

テキスト フィールドに入力された情報をページの別の段落に表示したいと考えています。基本的に、これを入力しているときに何が起こっているのかを正確に説明します (質問を投稿して、メインのテキスト ボックスに入力を開始すると、私の意味がわかります)。

これを行う方法はありますか？このページには JavaScript が多すぎて、どうやってそれを行ったのかわかりません。

4

3 に答える 3

55

これを探していると思います。

html は次のようになります。

<textarea id="txt" style="width:600px; height:200px;"></textarea>
<p id="preview"></p>

そしてjQuery：

$(function(){
  $('#txt').keyup(function(){
     $('#preview').text($(this).val());
  });
});

これはtextareaそのkeyupイベントで の値を取得し、後で段落のテキストが の値で変更されます (text()メソッド) textarea $(this).val()。

于 2010-08-09T16:06:22.037 に答える
0

これがうまくいくはずの例です-

<html>
<head>
 <style>
 #typing{background-color:;}
 #display{background-color:#FFEFC6;}
 </style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
</head>
<body>
 <div id="typing">
  <input type="text" name="typing" value="" id="typing_input" style="height:100px;width:300px;">

  </input>
 </div>
 <div id="display">
  <p id="typing_display"></p>
 </div>

 <script type="text/javascript" charset="utf-8">

   $(document).ready(function()
   {
    $('#typing_input').bind("keypress keydown", function(event) {
     $('#typing_display').text($('#typing_input').attr("value"));
    });

   });
 </script>
</body>
</html>

余分なスタイルで申し訳ありません-自分自身を助けることはできません。Jqueryの.change（）は、さまざまなイベントが発生するまで変更されません。.live（）と.bind（）が必要です。.attr（ "value"）の部分もあります。これは、私が完全には理解していない余分な魔法を実行することがありますが、最新の状態に保たれます。頑張ってください！

于 2010-08-09T16:42:41.107 に答える
0

キーアップのようなものを使用して、キーが離されるたびに表示を更新します。誰かが何かをボックスに貼り付けた場合に備えて、変更イベントを処理する必要がある場合もあります。

<div id="container">
<textarea id="textfield"></textarea>
<p id="displayArea"></p>
</div>

<script type="text/javascript">
    var display = $('#displayArea');
    $('#textfield').keyup( function() {
       display.text( $(this).val() );
    }).change( function() {
       display.text( $(this).val() );
    });
</script>

また、 SO が使用するWMD エディターを確認することもできます。それはあなたが求めている以上のことをしますが、そこからいくつかのアイデアを得ることができます.

于 2010-08-09T15:49:50.827 に答える