Tome la siguiente página:
<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> El comportamiento que esperaría y que quiero lograr es que cuando haga clic en uno de los divs con el hashtag de clase, su contenido ("#uno" y " #dos " respectivamente) se agregue al final del texto en el área de texto text-box
Esto sucede cuando hago clic en las etiquetas hash justo después de que se carga la página. Sin embargo, cuando también empiezo a editar el texto en text-box manualmente y luego vuelvo a hacer clic en cualquiera de los hashtags, no se agregan en Firefox. En Chrome está sucediendo lo más extraño: todo el texto que escribo manualmente se reemplaza con el nuevo hashtag y desaparece.
Probablemente estoy haciendo algo muy mal aquí, por lo que agradecería si alguien puede señalar mi error aquí y cómo solucionarlo.
Gracias.
2 cosas.
Primero, <textarea/> no es una etiqueta válida. Las etiquetas <textarea> deben estar completamente cerradas con una etiqueta de cierre </textarea> completa.
En segundo lugar, $(textarea).append(txt) no funciona como crees. Cuando se carga una página, los nodos de texto dentro del área de texto se establecen en el valor de ese campo de formulario. Después de eso, los nodos de texto y el valor se pueden desconectar. A medida que escribe en el campo, el valor cambia, pero los nodos de texto dentro de él en el DOM no. Luego cambia los nodos de texto con append() y el navegador borra el valor porque sabe que los nodos de texto dentro de la etiqueta han cambiado.
Entonces, desea establecer el valor, no desea agregar. Use el método val() de jQuery para esto.
$(document).ready(function(){ $(".hashtag").click(function(){ var txt = $.trim($(this).text()); var box = $("#text-box"); box.val(box.val() + txt); }); });Ejemplo de trabajo: http://jsfiddle.net/Hhptn/
Usa la función val() :)
<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>¿Eso ayuda?
La razón por la que append no parece funcionar es porque el valor del área de texto se compone del nodo secundario, pero al tratarlo como múltiples nodos separados, la pantalla no se actualizará, según mi Firebug. Firebug me mostrará los nodos secundarios actualizados, pero NO el texto que escribí manualmente en el área de texto, mientras que la pantalla me muestra el texto escrito manualmente pero no los nuevos nodos.
Puede hacer referencia por valor de textarea.
$(document).ready(function () { window.document.getElementById("ELEMENT_ID").value = "VALUE"; }); function GetValueAfterChange() { var data = document.getElementById("ELEMENT_ID").value; }funciona bien.