テキストフィールドに入力された情報を取得し、ページ上の別の段落に表示したい。基本的に、これを入力しているときに正確に以下で何が起こっていますか(質問を投稿し、メインテキストボックスに入力し始めると、意味がわかります)。
これを行う方法はありますか?このページには非常に多くのJavaScriptがあり、どのように実行されたのかわかりません。
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
の値が取得され、後で段落のテキストがtextarea
text()
の値で変更されます($(this).val()
メソッド)。
動作するはずの例を次に示します-
<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")の部分もありますが、これは時々私が完全に理解していない余分な魔法をします-しかし、それは最新のままです。幸運を祈ります!
キーアップのようなものを使用し、キーが放されるたびに表示を更新します。また、誰かがボックスに何かを貼り付ける場合に備えて、変更イベントを処理する必要があります。
<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が使用するものです。あなたが求めている以上のことを行いますが、そこからアイデアを得ることができます。