用jQuery動態改變段落文字？

我想將輸入的信息放入文本字段中，並將其顯示在頁面中的其他位置。基本上，正如我在輸入下面發生的那樣（發佈一個問題並開始在主文本框中輸入，你會明白我的意思）。用jQuery動態改變段落文字？

任何想法如何做到這一點？該頁面上有很多JavaScript，我無法找到它們是如何做到的。

2010-08-09 Carson

這裏是你的HTML看起來應該像：

<textarea id="txt" style="width:600px; height:200px;"></textarea> 
<p id="preview"></p>

和jQuery：

$(function(){ 
    $('#txt').keyup(function(){ 
    $('#preview').text($(this).val()); 
    }); 
});

這抓住它keyup事件textarea值和後來的段落文本改變（text()方法）與textarea$(this).val()的改變。

來源

2010-08-09 16:06:22 Sarfraz

你可能想閱讀關於什麼使得一個很好的答案的常見問題：http://meta.stackexchange.com/questions/7656/how-do-i-write-a-good-answer-to-a-question 。國際海事組織，雖然你的解決方案可能是正確的，但你的答案並不特別有用，如果鏈接死亡你真的應該在代碼中加入代碼和描述，這樣它就可以獨立運作。 – tvanfosson 2010-08-09 17:47:00

@tvanfosson：我完全同意你的觀點，我有點匆忙，不能再寫任何東西，因爲我一小時後就離開了，現在回來了，謝謝你提醒我，並且說明它的工作原理是強制性的，我個人第二次回答你的答案。再次感謝。 – Sarfraz 2010-08-09 17:54:58

我會使用類似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 editor，這是什麼SO使用。它比你所要求的要多，但你可以從中得到一些想法。

來源

2010-08-09 15:49:50 tvanfosson

這裏是一個應該只是工作的範例 -

<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（「價值」）部分，有時會做額外的魔法，我不完全理解 - 但它確實保持最新。祝你好運！

來源

2010-08-09 16:42:41 linguistbreaker

用jQuery動態改變段落文字？

回答

相關問題