Динамически изменять текст абзаца с помощью jQuery?
Я хочу взять информацию, введенную в текстовое поле, и отобразить ее в абзаце в другом месте страницы. В основном , именно то, что происходит ниже, когда я набираю это (перейдите к публикации вопроса и начните вводить текст в основном текстовом поле, и вы поймете, что я имею в виду).
Есть идеи, как это сделать? На странице так много JavaScript, что я не могу понять, как они это сделали.
3 ответа
Вот как должен выглядеть ваш 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 () .
Я бы использовал что-то вроде 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 , который использует SO. Он делает больше, чем вы просите, но вы можете почерпнуть из него некоторые идеи.
Вот пример, который должен просто работать -
<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's .change() не будет меняться, пока не произойдут различные события, .live() и .bind() - это то, что вам нужно. Есть также часть .attr("value"), которая иногда делает дополнительную магию, которую я не совсем понимаю - но она остается актуальной. Желаю удачи!