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

Question

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

jquerytextpreview

28

我想把输入到文本框中的信息显示在页面其他地方的段落中。基本上，就像我现在打字时下面所发生的一样（转到发布问题并在主文本框中开始键入，您就会明白我的意思）。

有什么想法如何实现这一点？页面上有很多 JavaScript，我找不到他们是怎么做到的。

- Carson

3个回答

0

我会使用类似于keyup的方法，并在每次释放按键时更新显示。你可能还需要处理change事件，以防有人将内容粘贴到框中。

<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编辑器，这是SO使用的编辑器。它做得比您要求的更多，但您可以从中获得一些想法。

- tvanfosson

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") 部分，有时候可以做一些我不太理解的魔法，但它确实可以保持最新状态。祝你好运！

- linguistbreaker

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sarfraz · Accepted Answer

我认为你在寻找这个。

以下是你的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 事件中获取其值，并使用 $(this).val() 将段落的文本更改为 textarea 的值 (text() 方法)。