JQuery non .Append aggiungendo alla textarea dopo il testo modificato

Prendere la seguente pagina:JQuery non .Append aggiungendo alla textarea dopo il testo modificato

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"/> 
    </head> 
    <body> 
     <div class="hashtag">#one</div> 
     <div class="hashtag">#two</div> 
     <form accept-charset="UTF-8" action="/home/index" method="post"> 
      <textarea id="text-box"/> 
      <input type="submit" value ="ok" id="go" /> 
     </form> 
     <script type="text/javascript"> 
$(document).ready(function(){ 

    $(".hashtag").click(function(){ 
    var txt = $.trim($(this).text()); 
    $("#text-box").append(txt); 
    }); 
}); 
     </script> 
    </body> 
</html>

Il comportamento mi aspetterei, e che voglio ottenere è che quando clicco su uno dei div con classe hashtag il loro contenuto (rispettivamente "#one" e "#two") sarà aggiunto alla fine del testo nella textarea text-box.

Ciò accade quando faccio clic sui tag hash subito dopo il caricamento della pagina. Tuttavia, quando inizierò anche a modificare manualmente il testo in text-box e poi torno a fare clic su uno qualsiasi degli hashtag che non vengono aggiunti su Firefox. Su Chrome la cosa più bizzarra sta accadendo: tutto il testo che digito manualmente viene sostituito con il nuovo hashtag e scompare.

Probabilmente sto facendo qualcosa di molto sbagliato qui, quindi sarei grato se qualcuno possa segnalare il mio errore qui, e come risolverlo. Grazie.

fonte

2011-01-18 Krzysztof Kozmic

2 cose.

Innanzitutto, <textarea/> non è un tag valido. I tag <textarea> devono essere completamente chiusi con un tag di chiusura completo </textarea>.

Secondo, $(textarea).append(txt) non funziona come credi. Quando una pagina viene caricata, i nodi di testo all'interno dell'area di testo sono impostati sul valore di quel campo modulo. Successivamente, i nodi di testo e il valore possono essere disconnessi. Mentre digiti nel campo, il valore cambia, ma i nodi di testo al suo interno sul DOM non lo fanno. Quindi si modificano i nodi di testo con append() e il browser cancella il valore perché sa che i nodi di testo all'interno del tag sono stati modificati.

Quindi si desidera impostare il valore, non si desidera aggiungere. Usa il metodo val() di jQuery per questo.

$(document).ready(function(){ 
    $(".hashtag").click(function(){ 
    var txt = $.trim($(this).text()); 
    var box = $("#text-box"); 
    box.val(box.val() + txt); 
    }); 
});

esempio di lavoro: http://jsfiddle.net/Hhptn/

fonte

2011-01-18 10:32:43

grazie quello che volevo capire –

Utilizzare la val function() :)

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <div class="hashtag">#one</div> 
     <div class="hashtag">#two</div> 
     <form accept-charset="UTF-8" action="/home/index" method="post"> 
      <textarea id="text-box"></textarea> 
      <input type="submit" value ="ok" id="go" /> 
     </form> 
     <script type="text/javascript"> 
$(document).ready(function(){ 

    $(".hashtag").click(function(){ 
    var txt = $.trim($(this).text()); 
    $("#text-box").val($("#text-box").val() + txt); 
    }); 
}); 
     </script> 
    </body> 
</html>

fa questo aiuto?

Il motivo append non sembra funzionare perché il valore della textarea è costituito dal nodo figlio, ma trattandolo come più nodi separati lo schermo non si aggiorna, secondo il mio Firebug. Firebug mi mostrerà i nodi figli aggiornati, ma NON il testo che ho digitato manualmente nella textarea, mentre lo schermo mi mostra il testo digitato manualmente ma non i nuovi nodi.

fonte

2011-01-18 10:30:45 Pim

è possibile fare riferimento per valore del textarea.

$(document).ready(function() { 
    window.document.getElementById("ELEMENT_ID").value = "VALUE"; 
}); 

function GetValueAfterChange() 
{ 
    var data = document.getElementById("ELEMENT_ID").value; 
}

funziona correttamente.

fonte

2015-02-10 11:33:42 Makko

if(data.quote) $('textarea#message').val($('textarea#message').val()+data.message +' ').focus();

fonte

2015-10-31 20:57:46

JQuery non .Append aggiungendo alla textarea dopo il testo modificato

risposta

Problemi correlati