Insertar texto en el área de texto con jQuery
Me pregunto cómo puedo insertar texto en un área de texto usando jquery, al hacer clic en una etiqueta de anclaje.
No quiero reemplazar el texto que ya está en el área de texto, quiero agregar texto nuevo al área de texto.
Jun 04
'09 02:06
Me gusta la extensión de la función jQuery. Sin embargo, esto se refiere al objeto jQuery, no al objeto DOM. Así que lo modifiqué un poco para hacerlo aún mejor (puedo actualizar en múltiples cuadros de texto/áreas de texto a la vez).
jQuery.fn.extend({
insertAtCaret: function(myValue){
return this.each(function(i) {
if (document.selection) {
//For browsers like Internet Explorer
this.focus();
var sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
else if (this.selectionStart || this.selectionStart == '0') {
//For browsers like Firefox and Webkit based
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
});
}
});
Esto funciona muy bien. Puede insertar en varios lugares a la vez, como:
$('#element1, #element2, #element3, .class-of-elements').insertAtCaret('text');
Por lo que tienes en los comentarios de Jason, intenta:
$('a').click(function() //this will apply to all anchor tags
{
$('#area').val('foobar'); //this puts the textarea for the id labeled 'area'
})
Editar: para agregar al texto, mire a continuación
$('a').click(function() //this will apply to all anchor tags
{
$('#area').val($('#area').val()+'foobar');
})
Utilizo esta función en mi código:
$.fn.extend({
insertAtCaret: function(myValue) {
this.each(function() {
if (document.selection) {
this.focus();
var sel = document.selection.createRange();
sel.text = myValue;
this.focus();
} else if (this.selectionStart || this.selectionStart == '0') {
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos) +
myValue + this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
});
return this;
}
});input{width:100px}
label{display:block;margin:10px 0}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Copy text from: <input id="in2copy" type="text" value="x"></label>
<label>Insert text in: <input id="in2ins" type="text" value="1,2,3" autofocus></label>
<button onclick="$('#in2ins').insertAtCaret($('#in2copy').val())">Insert</button>No es 100% mío, lo busqué en Google en alguna parte y luego sintonicé la mía.
Uso:$('#element').insertAtCaret('text');
Sé que esta es una vieja pregunta, pero para las personas que buscan esta solución vale la pena señalar que no deben usar append() para agregar contenido a un área de texto. el método append() apunta a internalHTML, no al valor del área de texto. El contenido puede aparecer en el área de texto pero no se agregará al valor del formulario del elemento.
Como se señaló anteriormente usando:
$('#textarea').val($('#textarea').val()+'new content');
funcionará bien.
