Cambia il testo del paragrafo in modo dinamico con jQuery?

Desidero prendere le informazioni digitate in un campo di testo e visualizzarle in un paragrafo altrove nella pagina. Fondamentalmente, esattamente quello che sta succedendo di seguito come sto digitando questo (vai a pubblicare una domanda e inizia a digitare nella casella di testo principale e vedrai cosa intendo).Cambia il testo del paragrafo in modo dinamico con jQuery?

Qualche idea su come procedere? La pagina ha così tanto JavaScript su di esso che non riesco a trovare come hanno fatto.

fonte

2010-08-09 Carson

I think you are looking for this.

Ecco come tuo html dovrebbe essere simile:

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

e jQuery:

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

Questo afferra il valore di textarea sul suo evento keyup e il testo in seguito del paragrafo è cambiato (metodo text()) con quello di textarea$(this).val().

fonte

2010-08-09 16:06:22 Sarfraz

si potrebbe voler leggere le FAQ su ciò che rende una buona risposta: http://meta.stackexchange.com/questions/7656/how-do-i-write-a-good-answer-to-a-question . IMO, mentre la tua soluzione potrebbe essere corretta, la tua risposta non è particolarmente utile se il link muore. Dovresti davvero includere il codice e una descrizione nella risposta stessa in modo che possa reggersi da solo. – tvanfosson

@tvanfosson: Sono completamente d'accordo con te, ero un po 'di fretta e non potevo scrivere altro perché sono andato via e sono tornato dopo un'ora, grazie per avermi ricordato questa e sì la spiegazione di come funziona è obbligatoria e Io personalmente secondo la tua risposta in realtà. Grazie ancora. – Sarfraz

Vorrei usare qualcosa come la chiave e aggiornare il display ogni volta che viene rilasciato un tasto. Potrebbe anche essere necessario gestire l'evento change nel caso qualcuno incolli qualcosa nella scatola.

<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>

Inoltre, si poteva guardare il WMD editor, che è quello che utilizza SO. Fa più di quello che chiedi, ma potresti ricavarne alcune idee.

fonte

2010-08-09 15:49:50 tvanfosson

Ecco un esempio che dovrebbe funzionare -

<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>

Ci scusiamo per gli stili in più - non può farne a meno. Jquery's .change() non cambierà fino a quando non verranno attivati diversi eventi, .live() e .bind() sono ciò che desideri. C'è anche la parte .attr ("valore") che a volte fa magie extra che non capisco del tutto - ma rimane aggiornata. Buona fortuna!

fonte

2010-08-09 16:42:41 linguistbreaker

Cambia il testo del paragrafo in modo dinamico con jQuery?

risposta

Problemi correlati