使用 jQuery 动态更改段落文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3441699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change paragraph text dynamically with jQuery?
提问by Carson
I want to take the information typed into a text field and display it in a paragraph elsewhere on the page. Basically, exactly what is happening below as I'm type this (go to post a question and start typing in the main text box and you'll see what I mean).
我想将输入到文本字段中的信息显示在页面其他地方的段落中。基本上，当我输入这个时，下面发生了什么（去发布一个问题并开始在主文本框中输入，你会明白我的意思）。
Any idea how to do this? The page has so much JavaScript on it I can't find how they did it.
知道如何做到这一点吗？该页面上有太多 JavaScript，我无法找到他们是如何做到的。
回答by Sarfraz
I think you are looking for this.
Here is how your html should look like:
这是您的 html 的外观：
<textarea id="txt" style="width:600px; height:200px;"></textarea>
<p id="preview"></p>
And jQuery:
和 jQuery：
$(function(){
$('#txt').keyup(function(){
$('#preview').text($(this).val());
});
});
This grabs the value of textareaon its keyupevent and later the paragraph's text is changed (text()method) with that of textarea$(this).val().
这会textarea在其keyup事件上获取的值，然后将段落的文本更改（text()方法）为textarea$(this).val()。
回答by tvanfosson
I would use something like keyup and update the display each time a key is released. You might also need to handle the change event in case someone pastes something into the box.
我会使用类似 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>
Also, you could look at the WMD editor, which is what SO uses. It does more than you are asking for, but you could get some ideas from it.
此外，您可以查看WMD editor，这就是 SO 使用的内容。它的作用超出了您的要求，但您可以从中获得一些想法。
回答by linguistbreaker
Here's an example that should just work -
这是一个应该可以正常工作的示例-
<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>
Sorry for the extra styles - can't help myself. Jquery's .change() won't change is until different events are fired, .live() and .bind()are what you want. There's also the .attr("value") part which sometimes does extra magic that i don't totally understand - but it does stay up to date. Best of luck!
对不起，多余的款式 - 忍不住了。Jquery 的 .change() 不会改变，直到不同的事件被触发， .live() 和.bind()是你想要的。还有 .attr("value") 部分，它有时会产生我不完全理解的额外魔法 - 但它确实保持最新状态。祝你好运！
