Mi chiedo come posso inserire il testo in un'area di testo usando jquery, facendo clic su un tag di ancoraggio.
Non voglio sostituire il testo già in textarea, voglio aggiungere nuovo testo a textarea.
Mi chiedo come posso inserire il testo in un'area di testo usando jquery, facendo clic su un tag di ancoraggio.
Non voglio sostituire il testo già in textarea, voglio aggiungere nuovo testo a textarea.
Risposte:
Da quello che hai nei commenti di Jason prova:
$('a').click(function() //this will apply to all anchor tags
{
$('#area').val('foobar'); //this puts the textarea for the id labeled 'area'
})
Modifica: per aggiungere al testo, guarda in basso
$('a').click(function() //this will apply to all anchor tags
{
$('#area').val($('#area').val()+'foobar');
})
Mi piace l'estensione della funzione jQuery. Tuttavia, questo si riferisce all'oggetto jQuery non all'oggetto DOM. Quindi l'ho modificato un po 'per renderlo ancora migliore (può essere aggiornato in più caselle di testo / textareas contemporaneamente).
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();
}
});
}
});
Funziona davvero bene. Puoi inserire in più luoghi contemporaneamente, come:
$('#element1, #element2, #element3, .class-of-elements').insertAtCaret('text');
sel
pensato per essere globale?
Uso questa funzione nel mio codice:
$.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>
Non è mio al 100%, l'ho cercato su Google da qualche parte e poi ho messo a punto la mia app.
Uso: $('#element').insertAtCaret('text');
So che questa è una vecchia domanda, ma per le persone che cercano questa soluzione vale la pena notare che non dovresti usare append () per aggiungere contenuto a un'area di testo. il metodo append () si rivolge a innerHTML e non al valore dell'area di testo. Il contenuto può essere visualizzato nell'area di testo ma non verrà aggiunto al valore del modulo dell'elemento.
Come notato sopra usando:
$('#textarea').val($('#textarea').val()+'new content');
funzionerà bene.
questo ti permette di "iniettare" un pezzo di testo nella casella di testo, iniettare significa: accoda il testo dove si trova il cursore.
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;
}
}
E puoi usarlo in questo modo:
<a href="javascript:void(0);" onclick="inyectarTexto('nametField','hello world');" >Say hello world to text</a>
Divertente e ha più senso quando abbiamo la funzionalità "Inserisci tag nel testo".
funziona in tutti i browser.
.focus()
invocazioni e degli aggiornamenti alla selectionStart
e selectionEnd
dopo la modifica. Le variabili spagnole potrebbero essere state usate per giustificare un'altra risposta ...
Hej questa è una versione modificata che funziona bene in FF @least per me e si inserisce nella posizione del cursore
$.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();
}
}
})
hai provato:
$("#yourAnchor").click(function () {
$("#yourTextarea").val("your text");
});
non sono sicuro dell'illuminazione automatica, però.
MODIFICA :
Per aggiungere:
$("#yourAnchor").click(function () {
$("#yourTextarea").append("your text to append");
});
append()
non funziona sul valore di a textarea
. Il append()
metodo si rivolge a innerHTML, non al valore dell'area di testo.
Quello che chiedi dovrebbe essere ragionevolmente semplice in jQuery-
$(function() {
$('#myAnchorId').click(function() {
var areaValue = $('#area').val();
$('#area').val(areaValue + 'Whatever you want to enter');
});
});
Il modo migliore che posso pensare di evidenziare il testo inserito è racchiuderlo in un arco con una classe CSS con l' background-color
impostazione del colore che preferisci. Nel successivo inserto, è possibile rimuovere la classe da qualsiasi intervallo esistente (o rimuovere gli intervalli).
Tuttavia, sul mercato sono disponibili molti editor WYSIWYG HTML / Rich Text gratuiti, sono sicuro che uno soddisferà le tue esigenze
Ecco una soluzione rapida che funziona in jQuery 1.9+:
a) Ottieni posizione di inserimento:
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) Aggiungi testo in posizione di inserimento:
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) Esempio
$('textarea').each(function() {
var $this = $(this);
$this.click(function() {
//get caret position
var caret = getCaret($this);
//append some text
appendAtCaret($this, caret, 'Some text');
});
});
Funziona bene per me in 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;
Penso che sarebbe meglio
$(function() {
$('#myAnchorId').click(function() {
var areaValue = $('#area').val();
$('#area').val(areaValue + 'Whatever you want to enter');
});
});
Questo è simile alla risposta data da @panchicore con un bug minore corretto.
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;
}
}
Soluzione semplice potrebbe essere: ( Assunzione : Volete qualunque cosa digiti all'interno del testo per ottenere aggiunto a ciò che è già lì nella textarea )
In onClick caso di tag <a>, scrivere una funzione definita dall'utente, che fa questo:
function textType(){
var **str1**=$("#textId1").val();
var **str2**=$("#textId2").val();
$("#textId1").val(str1+str2);
}
(dove ids, textId1 - per o / p textArea textId2 -per i / p textbox ')
$.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) ;
}
}
});
L'ho usato e funziona benissimo :)
$("#textarea").html("Put here your content");
Remi