JQuery no .Append anexando al área de texto tras texto editado

Tome la siguiente página:JQuery no .Append anexando al área de texto tras texto editado

<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 se puede esperar, y que yo quiero lograr es que cuando hago clic en uno de los divs con la clase hashtag su contenido ("#one" y "#two", respectivamente) se anexaría al final del texto en textarea text-box.

Esto sucede cuando hago clic en las etiquetas hash justo después de cargar 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 que no se anexan 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 malo aquí, por lo que agradecería si alguien puede señalar mi error aquí, y cómo solucionarlo. Gracias.

Fuente

2011-01-18 Krzysztof Kozmic

2 cosas.

Primero, <textarea/> no es una etiqueta válida. Las etiquetas <textarea> deben cerrarse completamente 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 el apéndice() y el navegador borra el valor porque sabe que los nodos de texto dentro de la etiqueta han cambiado.

Así que desea establecer el valor, no desea agregar. Usa 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/

Fuente

2011-01-18 10:32:43

gracias eso es lo que quería entender –

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

¿Ayuda?

La razón por la que el apéndice no parece funcionar es porque el valor del área de texto está formado por el nodo secundario, pero tratándolo 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.

Fuente

2011-01-18 10:30:45 Pim

puede hacer referencia al valor del área de texto.

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

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

funciona bien.

Fuente

2015-02-10 11:33:42 Makko

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

Fuente

2015-10-31 20:57:46

JQuery no .Append anexando al área de texto tras texto editado

Respuesta

Cuestiones relacionadas