Question

我想知道如何在点击锚标签时使用jquery将文本插入文本区域。

我不想替换textarea中的文本，我想将新文本追加到textarea。

Answer 1

我喜欢jQuery函数扩展。但是， this 指的是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');

Answer 2

根据杰森的评论，你可以尝试：

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

Answer 3

我在我的代码中使用了这个函数：

$.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');

Answer 4

我知道这是一个老问题，但对于搜索此解决方案的人来说，值得注意的是，您不应该使用append（）将内容添加到textarea。 append（）方法的目标是innerHTML，而不是textarea的值。内容可能出现在textarea中，但不会添加到元素的表单值中。

如上所述：

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

会正常工作。

Answer 5

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

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>

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

适用于所有浏览器。

Answer 6

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

Answer 7

你试过了吗？

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

但是，

不确定自动加亮。

修改：

追加：

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

Answer 8

你要求的东西应该在jQuery中相当简单 -

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

我能想到突出显示插入文本的最佳方法是将其包装在一个带有CSS类的范围中，background-color设置为您选择的颜色。在下一个插入中，您可以从任何现有跨距中移除该类（或剥离跨距）。

但是，市场上有很多免费的WYSIWYG HTML / Rich Text编辑器，我相信它会满足您的需求

TinyMCE - JavaScript WYSIWYG编辑器
Rich Text Editor - YUI图书馆
的 10 jQuery and Non-jQuery JavaScript Rich Text Editors

Answer 9

这是一个适用于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');
  });
});

Answer 10

在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 11

如果您想将内容附加到textarea而不替换它们，可以尝试以下

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

根据您的情况，它将是

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

Answer 12

我使用它并且工作正常：）

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

雷米

Answer 13

我认为这会更好

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

Answer 14

如果某些其他脚本在您的情况下不起作用，还会另外解释here。

Answer 15

简单的解决方案是：（假设：您希望在文本框中输入的内容附加到 textarea 中已有的内容）

在＆lt; onClick 事件中a＆gt; tag，写一个用户定义的函数，它执行以下操作：

function textType(){

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

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

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

}

（其中ids， textId1 - 适用于o / p textArea textId2 - 用于i / p文本框＆＃39;）

Answer 16

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

public override int SaveChanges()
{
    var allTrackedEntities = this.ChangeTracker.Entries().ToList();

    return base.SaveChanges();
}

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

使用jQuery将文本插入textarea

17 个答案: