javascript - span - insertar codigo html con jquery
JQuery.append no se agrega a textarea después de editar texto (4)
2 cosas.
Primero, <textarea/> no es una etiqueta válida. <textarea> etiquetas <textarea> deben estar completamente cerradas con una etiqueta de cierre completa </textarea> .
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.
Entonces quiere 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/
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 hago clic en uno de los divs con hashtag clase, su contenido ("#one" y "#two" respectivamente) se anexen 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 mal aquí, por lo que agradecería que alguien pueda señalar mi error aquí y cómo solucionarlo. Gracias.
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.
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 anexar no parece funcionar es porque el valor del área de texto está formado por el 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.
if(data.quote) $(''textarea#message'').val($(''textarea#message'').val()+data.message +'' '').focus();