問題描述
使用 jQuery 將文本插入 textarea (Insert text into textarea with jQuery)
I'm wondering how I can insert text into a text area using jquery, upon the click of an anchor tag.
I don't want to replace text already in textarea, I want to append new text to textarea.
‑‑‑‑‑
參考解法
方法 1:
I like the jQuery function extension. However, the this refers to the jQuery object not the DOM object. So I've modified it a little to make it even better (can update in multiple textboxes / textareas at once).
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();
}
});
}
});
This works really well. You can insert into multiple places at once, like:
$('#element1, #element2, #element3, .class‑of‑elements').insertAtCaret('text');
方法 2:
From what you have in Jason's comments try:
$('a').click(function() //this will apply to all anchor tags
{
$('#area').val('foobar'); //this puts the textarea for the id labeled 'area'
})
Edit‑ To append to text look at below
$('a').click(function() //this will apply to all anchor tags
{
$('#area').val($('#area').val()+'foobar');
})
方法 3:
I use this function in my code:
$.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>
It's not 100% mine, I googled it somewhere and then tuned for mine app.
Usage: $('#element').insertAtCaret('text');
方法 4:
I know this is an old question but for people searching for this solution it's worth noting that you should not use append() to add content to a textarea. the append() method targets innerHTML not the value of the textarea. The content may appear in the textarea but it will not be added to the element's form value.
As noted above using:
$('#textarea').val($('#textarea').val()+'new content');
will work fine.
方法 5:
this one allow you "inject" a piece of text to textbox, inject means: appends the text where cursor is.
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;
}
}
And you can use it like this:
<a href="javascript:void(0);" onclick="inyectarTexto('nametField','hello world');" >Say hello world to text</a>
Funny and have more sence when we have "Insert Tag into Text" functionality.
works in all browsers.
(by user114752、Aniebiet Udoh、TStamper、Thinker、Marcus、panchicore)