使用 jQuery 将文本插入 textarea

我想知道如何使用 jquery 在单击锚标记时将文本插入到文本区域中。

我不想在 textarea 中替换已经存在的文本，我想在 textarea 中添加新的文本。

275206 次浏览
小开

你有没有试过:

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

不过不确定是不是要自动高亮。

编辑:

附录:

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

我在代码中使用这个函数:

$.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>

它不是100% 是我的，我谷歌了一下，然后调到了我的应用程序。

用法: $('#element').insertAtCaret('text');

小开
最佳答案

从 Jason 的评论中可以看出:

$('a').click(function() //this will apply to all anchor tags
{
$('#area').val('foobar'); //this puts the textarea for the id labeled 'area'
})

编辑- 要在文本后面追加内容，请看下面

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

在 jQuery-中，您所要求的应该相当简单

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

我能想到的突出显示插入文本的最佳方法是使用 CSS 类将其包装在一个 span 中，并将 background-color设置为您所选择的颜色。在下一次插入时，您可以从任何现有的 span 中删除该类(或者去掉 span)。

然而，市场上有很多免费的所见即所得的 HTML/Rich Text 编辑器，我相信其中一个能满足你的需要

小开

这个允许你“注入”一段文本到文本框中，注入的意思是: 将文本附加到光标所在的位置。

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;
}
}

你可以这样使用它:

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

当我们有“插入标签到文本”的功能时，有趣和有更多的意义。

适用于所有浏览器。

小开

我用过了，效果很好:)

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

雷米

小开

我喜欢 jQuery 函数扩展。但是，这个引用的是 jQuery 对象，而不是 DOM 对象。因此，我对它进行了一些修改，使其更加完善(可以同时在多个文本框/文本区中进行更新)。

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();
}
});
}
});

这个工作非常好。你可以一次插入多个地方，比如:

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

这是一个修改过的版本，在 FF@中工作正常，至少对我来说是这样，插入插入符号的位置

  $.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();
}
}
})
小开

我知道这是一个老问题，但是对于搜索这个解决方案的人来说，值得注意的是不应该使用 append ()来向文本区域添加内容。Append ()方法的目标是 innerHTML，而不是 textarea 的值。内容可以出现在文本区域中，但是不会添加到元素的表单值中。

如上所述，使用:

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

没问题的。

小开

我觉得这样更好

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

它在 Chrome20.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;
小开

如果您希望在不替换内容的情况下将内容附加到 textarea，可以尝试下面的操作

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

根据你的设想，应该是

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

下面是一个在 jQuery 1.9 + 中使用的快速解决方案:

A)选择插入位置:

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)在插入符号位置附加文字:

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)例子

$('textarea').each(function() {
var $this = $(this);
$this.click(function() {
//get caret position
var caret = getCaret($this);


//append some text
appendAtCaret($this, caret, 'Some text');
});
});
小开

另一个解决方案也描述了 给你的情况下，一些其他脚本不工作的情况下。

小开

简单的解决办法是: (假设: 您希望在 短信箱中键入的任何内容被附加到 文字区中已经存在的内容之后)

在 < a > 标记的 点击事件中，编写一个用户定义的函数，该函数执行以下操作:

function textType(){


var **str1**=$("#textId1").val();


var **str2**=$("#textId2").val();


$("#textId1").val(str1+str2);


}

(其中 id，TextId1-用于 o/p textArea TextId2-用于 i/p textbox’)

小开

这类似于@panchicore 给出的答案，只是修复了一个小错误。

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;
}
}
小开 
$.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) ;
}
}
});

提交答案