Chcę wziąć informacje wpisane w polu tekstowym i wyświetlić je w akapicie w innym miejscu na stronie. Zasadniczo, dokładnie to, co dzieje się poniżej, gdy jestem tego typu (idź, aby opublikować pytanie i zacząć pisać w głównym polu tekstowym, a zobaczysz co mam na myśli).Zmieniasz tekst akapitowy dynamicznie za pomocą jQuery?
Każdy pomysł, jak to zrobić? Strona zawiera tak dużo skryptów JavaScript, że nie mogę znaleźć sposobu, w jaki to zrobili.
I think you are looking for this.
Oto w jaki sposób HTML powinien wyglądać następująco:
<textarea id="txt" style="width:600px; height:200px;"></textarea>
<p id="preview"></p>
i jQuery:
$(function(){
$('#txt').keyup(function(){
$('#preview').text($(this).val());
});
});
Ten chwyta wartość textarea na jego keyup zdarzenia i późniejszym tekście akapitu jest zmieniany (metoda text()) z tą z textarea$(this).val().
Używam czegoś takiego jak klawisz i aktualizuję wyświetlacz po każdym wydaniu klucza. Może zajść potrzeba obsługi zdarzenia zmiany, na wypadek gdyby ktoś wkleił coś do pudełka.
<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>
Można również spojrzeć na WMD editor, który jest używany przez SO. Robi więcej, niż prosisz, ale możesz uzyskać z tego pomysły.
Oto przykład, który powinien po prostu pracować -
<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>
Niestety dla dodatkowych stylów - nie mogę się powstrzymać. Jquery's .change() nie zmieni się, dopóki nie zostaną uruchomione różne zdarzenia, .live() i .bind() są tym czego potrzebujesz. Istnieje również część .attr ("value"), która czasami zawiera dodatkową magię, której nie rozumiem - ale pozostaje aktualna. Powodzenia!
możesz przeczytać Często zadawane pytania na temat tego, co stanowi dobrą odpowiedź: http://meta.stackexchange.com/questions/7656/how-do-i-write-a-good-answer-to-a-question . IMO, podczas gdy twoje rozwiązanie może być poprawne, twoja odpowiedź nie jest szczególnie przydatna, gdy link umiera. Naprawdę powinieneś dołączyć kod i opis do samej odpowiedzi, aby mógł sam stanąć. – tvanfosson
@tvanfosson: Całkowicie się z tobą zgadzam, trochę się spieszyłem i nie mogłem nic napisać dalej, ponieważ odszedłem i wróciłem po godzinie, dzięki za przypomnienie mi, że tak i wyjaśnienie, jak to działa jest obowiązkowe i Osobiście oddaję twoją odpowiedź w rzeczywistości. Dzięki jeszcze raz. – Sarfraz