Изменить текст абзаца динамически с помощью jQuery? - PullRequest
Новая
       36

Изменить текст абзаца динамически с помощью jQuery?

27 голосов
/ 09 августа 2010

Я хочу взять информацию, набранную в текстовом поле, и отобразить ее в абзаце в другом месте на странице.По сути, именно то, что происходит ниже, когда я набираю это (зайдите, чтобы опубликовать вопрос и начните вводить текст в основном текстовом поле, и вы поймете, что я имею в виду).

Есть идеи, как это сделать?На странице столько JavaScript, что я не могу найти, как они это сделали.

Ответы [ 3 ]

54 голосов
/ 09 августа 2010

Я думаю, вы ищете это.

Вот как должен выглядеть ваш 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().

0 голосов
/ 09 августа 2010

Вот пример, который должен просто работать - 

<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>

Извините за дополнительные стили - не могу с собой поделать. .Change () в Jquery не изменится до тех пор, пока не будут запущены разные события, .live () и .bind () - это то, что вам нужно. Также есть часть .attr ("value"), которая иногда создает дополнительную магию, которую я не совсем понимаю, но она остается в курсе. Желаем удачи!

0 голосов
/ 09 августа 2010

Я бы использовал что-то вроде keyup и обновлял дисплей каждый раз при отпускании клавиши. Вам также может понадобиться обработать событие изменения в случае, если кто-то вставит что-то в поле. 

<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. Он делает больше, чем вы просите, но вы можете извлечь из него некоторые идеи.

...