使用jQuery动态更改段落文本？答案

【问题标题】：Change paragraph text dynamically with jQuery?使用jQuery动态更改段落文本？
【发布时间】：2010-08-09 15:44:04
【问题描述】：

我想将输入到文本字段中的信息显示在页面其他位置的段落中。基本上，当我输入这个时，下面发生了什么（去发布一个问题并开始在主文本框中输入，你会明白我的意思）。

知道怎么做吗？该页面上有太多 JavaScript，我找不到他们是如何做到的。

【问题讨论】：

【解决方案1】：

你的 html 应该是这样的：

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

还有 jQuery：

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

这会在其keyup 事件中获取textarea 的值，然后将段落的文本更改为textarea $(this).val() 的文本（text() 方法）。

【讨论】：

您可能想阅读常见问题解答，了解什么才是好的答案：meta.stackexchange.com/questions/7656/…。 IMO，虽然您的解决方案可能是正确的，但如果链接失效，您的答案并不是特别有用。您确实应该在答案本身中包含代码和描述，以便它可以独立存在。
@tvanfosson：我完全同意你的看法，我有点着急，不能再写任何东西，因为我走了一个小时后现在回来了，谢谢你提醒我这个，是的解释它是如何工作的是强制性的，我个人实际上支持你的回答。再次感谢。

【解决方案2】：

这是一个应该可以正常工作的示例 -

<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") 部分有时会产生我不完全理解的额外魔法 - 但它确实保持最新。祝你好运！

【讨论】：

【解决方案3】：

我会使用 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>

另外，您可以查看WMD editor，这是 SO 使用的。它的作用超出了您的要求，但您可以从中获得一些想法。

【讨论】：