span - obtener texto de un boton jquery

Insertar texto en textarea con jQuery

Question

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 ya en textarea, quiero agregar texto nuevo a textarea.

Answer 1

éste le permite "inyectar" una pieza de texto en el cuadro de texto, "inyectar" significa: agrega el texto donde está el cursor.

function inyectarTexto(elemento,valor){
var elemento_dom=document.getElementsByName(elemento)[0];
if(document.selection){
elemento_dom.focus();
sel=document.selection.createRange();
sel.text=valor;
return;
}if(elemento_dom.selectionStart||elemento_dom.selectionStart=="0"){
var t_start=elemento_dom.selectionStart;
var t_end=elemento_dom.selectionEnd;
var val_start=elemento_dom.value.substring(0,t_start);
var val_end=elemento_dom.value.substring(t_end,elemento_dom.value.length);
elemento_dom.value=val_start+valor+val_end;
}else{
elemento_dom.value+=valor;
}
}

Y puedes usarlo así:

<a href="javascript:void(0);" onclick="inyectarTexto(''nametField'',''hello world'');" >Say hello world to text</a>

Es divertido y tiene más sentido cuando tenemos la funcionalidad "Insertar etiqueta en el texto".

funciona en todos los navegadores.

Answer 2

Aquí hay una solución rápida que funciona en jQuery 1.9+:

a) Obtener la posición de intercalación:

function getCaret(el) {
if (el.prop("selectionStart")) {
return el.prop("selectionStart");
} else if (document.selection) {
el.focus();
var r = document.selection.createRange();
if (r == null) {
return 0;
}
var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint(''EndToStart'', re);
return rc.text.length;
}
return 0;
};

b) Agregar texto en la posición de intercalación:

function appendAtCaret($target, caret, $value) {
var value = $target.val();
if (caret != value.length) {
var startPos = $target.prop("selectionStart");
var scrollTop = $target.scrollTop;
$target.val(value.substring(0, caret) + '' '' + $value + '' '' + value.substring(caret, value.length));
$target.prop("selectionStart", startPos + $value.length);
$target.prop("selectionEnd", startPos + $value.length);
$target.scrollTop = scrollTop;
} else if (caret == 0)
{
$target.val($value + '' '' + value);
} else {
$target.val(value + '' '' + $value);
}
};

c) Ejemplo

$(''textarea'').each(function() {
var $this = $(this);
$this.click(function() {
//get caret position
var caret = getCaret($this);
//append some text
appendAtCaret($this, caret, ''Some text'');
});
});

Answer 3

Creo que esto sería mejor

$(function() {
$(''#myAnchorId'').click(function() {
var areaValue = $(''#area'').val();
$(''#area'').val(areaValue + ''Whatever you want to enter'');
});
});

Answer 4

Esto es similar a la respuesta dada por @panchicore con un error menor corregido.

function insertText(element, value)
{
var element_dom = document.getElementsByName(element)[0];
if (document.selection)
{
element_dom.focus();
sel = document.selection.createRange();
sel.text = value;
return;
}
if (element_dom.selectionStart || element_dom.selectionStart == "0")
{
var t_start = element_dom.selectionStart;
var t_end = element_dom.selectionEnd;
var val_start = element_dom.value.substring(value, t_start);
var val_end = element_dom.value.substring(t_end, element_dom.value.length);
element_dom.value = val_start + value + val_end;
}
else
{
element_dom.value += value;
}
}

Answer 5

Funciona bien para mí en Chrome 20.0.11

var startPos = this[0].selectionStart;
var endPos = this[0].selectionEnd;
var scrollTop = this.scrollTop;
this[0].value = this[0].value.substring(0, startPos) + myVal + this[0].value.substring(endPos, this[0].value.length);
this.focus();
this.selectionStart = startPos + myVal.length;
this.selectionEnd = startPos + myVal.length;
this.scrollTop = scrollTop;

Answer 6

Hej esta es una versión modificada que funciona bien en FF @least para mí y se inserta en la posición de caricias

 $.fn.extend({
insertAtCaret: function(myValue){
var obj;
if( typeof this[0].name !=''undefined'' ) obj = this[0];
else obj = this;
if ($.browser.msie) {
obj.focus();
sel = document.selection.createRange();
sel.text = myValue;
obj.focus();
}
else if ($.browser.mozilla || $.browser.webkit) {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
var scrollTop = obj.scrollTop;
obj.value = obj.value.substring(0, startPos)+myValue+obj.value.substring(endPos,obj.value.length);
obj.focus();
obj.selectionStart = startPos + myValue.length;
obj.selectionEnd = startPos + myValue.length;
obj.scrollTop = scrollTop;
} else {
obj.value += myValue;
obj.focus();
}
}
})

Answer 7

La solución simple sería: ( Suposición : desea que lo que escriba dentro del cuadro de texto se anexe a lo que ya está allí en el área de texto )

En el evento onClick de la etiqueta <a>, escriba una función definida por el usuario, que hace esto:

function textType(){
var **str1**=$("#textId1").val();
var **str2**=$("#textId2").val();
$("#textId1").val(str1+str2);
}

(donde los ids, textId1 - para o / p textArea textId2 -for i / p textbox '')

Answer 8

Lo que pide debe ser razonablemente sencillo en jQuery-

$(function() {
$(''#myAnchorId'').click(function() {
var areaValue = $(''#area'').val();
$(''#area'').val(areaValue + ''Whatever you want to enter'');
});
});

La mejor manera en que puedo pensar en resaltar el texto insertado es envolviéndolo en un lapso con una clase CSS con background-color en el color que prefiera. En el siguiente inserto, puede eliminar la clase de cualquier tramo existente (o quitar los tramos).

Sin embargo, hay muchos editores WYSIWYG HTML / Rich Text gratuitos disponibles en el mercado, estoy seguro de que uno se adaptará a sus necesidades.

• TinyMCE - Editor WYSIWYG de JavaScript
• Rich Text Editor - Biblioteca YUI
• 10 editores de texto enriquecido de jQuery y non-jQuery JavaScript

Answer 9

Lo usé y funciona bien :)

$("#textarea").html("Put here your content");

Remi

Answer 10

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 he modificado un poco para que sea aún mejor (se puede actualizar en varios 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 realmente bien. Puede insertar en varios lugares a la vez, como:

$(''#element1, #element2, #element3, .class-of-elements'').insertAtCaret(''text'');

Answer 11

Otra solución se describe también here en caso de que algunos de los otros scripts no funcionen en su caso.

Answer 12

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, mira a continuación

$(''a'').click(function() //this will apply to all anchor tags
{
$(''#area'').val($(''#area'').val()+''foobar'');
})

Answer 13

Sé que esta es una vieja pregunta, pero para las personas que buscan esta solución vale la pena señalar que no debe usar append () para agregar contenido a un área de texto. el método append () apunta a innerHTML no al valor de textarea. El contenido puede aparecer en el área de texto pero no se agregará al valor del formulario del elemento.

Como se indicó anteriormente usando:

$(''#textarea'').val($(''#textarea'').val()+''new content'');

funcionará bien

Answer 14

Si desea agregar contenido al área de texto sin reemplazarlos, puede intentarlo a continuación

$(''textarea'').append(''Whatever need to be added'');

De acuerdo con su escenario, sería

$(''a'').click(function()
{
$(''textarea'').append($(''#area'').val());
})

Answer 15

Uso esta función en mi código:

$.fn.extend({ insertAtCaret: function(myValue) { if (document.selection) { this.focus(); 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(); } } })

No es 100% mío, lo busqué en Google en algún lugar y luego sintonicé mi aplicación.

Uso: $(''#element'').insertAtCaret(''text'');

Answer 16

has probado:

$("#yourAnchor").click(function () {
$("#yourTextarea").val("your text");
});

sin embargo, no estoy seguro acerca de la autoalineación.

EDITAR :

Para anexar:

$("#yourAnchor").click(function () {
$("#yourTextarea").append("your text to append");
});

Answer 17

$.fn.extend({
insertAtCaret: function(myValue) {
var elemSelected = window.getSelection();
if(elemSelected) {
var startPos = elemSelected.getRangeAt(0).startOffset;
var endPos = elemSelected.getRangeAt(0).endOffset;
this.val(this.val().substring(0, startPos)+myValue+this.val().substring(endPos,this.val().length));
} else {
this.val(this.val()+ myValue) ;
}
}
});