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

我会使用 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 使用的WMD 编辑器。它做的比你要求的要多，但你可以从中得到一些想法。

于 2010-08-09T15:49:50.827 回答
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 回答