用jQuery插入文本到textarea
我想知道如何使用jQuery插入文本到文本区域，单击锚标签。
我不想replace文本已经在textarea，我想附加新的文本到textarea。
从你在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扩展。 但是， 这是指jQuery对象而不是DOM对象。 所以我修改了一下，使其更好（可以在多个文本框/ textareas一次更新）。
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');
我在我的代码中使用这个函数：
$ .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（）;
}
}
}）
这不是100％，我把它search了一下，然后调整了我的应用程序。
用法： $('#element').insertAtCaret('text');
我知道这是一个老问题，但是对于search这个解决scheme的人来说，值得注意的是你不应该使用append（）来向textarea添加内容。 append（）方法的目标是innerHTML而不是textarea的值。 内容可能会出现在textarea，但不会被添加到元素的表单值。
如上所述使用：
$('#textarea').val($('#textarea').val()+'new content');
将工作正常。
Hej这是一个修改后的版本，可以在FF @least中正常工作，并插入到插入位置
$.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(); } } })
这个允许你“注入”一段文本到文本框，注入方式：追加光标所在的文本。
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>
当我们有“插入标签到文本”function时，有趣和更多的意义。
适用于所有浏览器。
你有没有尝试过：
$("#yourAnchor").click(function () { $("#yourTextarea").val("your text"); });
但是不确定autohighlighting。
编辑 ：
追加：
$("#yourAnchor").click(function () { $("#yourTextarea").append("your text to append"); });
你所要求的在jQuery中应该是相当简单的 –
$(function() { $('#myAnchorId').click(function() { var areaValue = $('#area').val(); $('#area').val(areaValue + 'Whatever you want to enter'); }); });
我能想到突出显示插入文本的最佳方法是将其包装在CSS类的跨度中， background-color设置为您select的颜色。 在下一个插入中，您可以从任何现有的跨度中删除类（或将跨度删除）。
不过，市场上有很多免费的所见即所得的HTML / Rich Text编辑器，我相信一个会适合您的需求
- TinyMCE – JavaScript所见即所得的编辑器
- 富文本编辑器 – YUI库
- 10个jQuery和非jQuery JavaScript富文本编辑器
这是一个快速的解决scheme，适用于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'); }); });
它在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;
如果你想将内容附加到textarea而不replace它们，你可以尝试下面的内容
$('textarea').append('Whatever need to be added');
根据你的情况，这将是
$('a').click(function() { $('textarea').append($('#area').val()); })
我用它，它工作正常:)
$("#textarea").html("Put here your content");
雷米
我认为这会更好
$(function() { $('#myAnchorId').click(function() { var areaValue = $('#area').val(); $('#area').val(areaValue + 'Whatever you want to enter'); }); });
另外一个解决scheme也在这里描述，以防其他脚本在你的情况下不起作用。
这与@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; } }
简单的解决scheme是：（ 假设 ：你想要在文本框中键入的任何东西附加到已经在textarea里面 ）
在<a>标签的onClick事件中，编写一个用户定义的函数：
function textType(){ var **str1**=$("#textId1").val(); var **str2**=$("#textId2").val(); $("#textId1").val(str1+str2); }
（其中ids， textId1 – for o / p textArea textId2 – for 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) ; } } });
