使用jQuery将文本插入textarea


151

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

我不想替换textarea中已经存在的文本,我想将新文本追加到textarea中。


1
如果这是解决方案-但是,宁愿自己构建它。它是针对我正在为一个朋友创建的个人博客,因此适合的任何内容。
奥利弗·史都比

因此,您想选择一个文本,然后选择其中一个,请使用jquery填充文本区域。
TStamper

TStamper,我希望能够单击一个按钮,然后根据单击的内容在textarea中插入文本。
奥利弗·史都比

因此,如果您单击标记为“粗体”的按钮,则想在文本区域中使用粗体?
TStamper

不是粗体文本,而是粗体标签(可能是自定义标签,而不是html标签)
Oliver Stubley,2009年

Answers:


125

根据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'); 
})

检查我的答案将文本追加一个更简单的方法
贾森-

8
@ Jason-对不起,不是真的,append期望html数据以html元素开头,例如:<p
TStamper 2009年

结果是否来自PHP页面并由jQuery处理怎么样?(在
两次

186

我喜欢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');

3
答案中有尾随的}),因此我一开始就坚信该解决方案不起作用,但是在修复该解决方案之后,它在IE7和FF3.5中效果很好。您可以在插入符处为TEXTAREA元素插入一段文本。谢谢!
菲利普(Philippe)2010年

1
这也适用于Chrome。感谢您为我节省了一些时间:)并感谢@Thinker提供原始代码。
Veli Gebrev

来自Google搜索。..我知道您的回答已经有一年了,但是对此非常感谢。像魅力一样工作
Mike Turley

6
sel要全球化?
qwertymk 2012年

1
对于任何需要coffeescript版本的人:gist.github.com/zachaysan/7100458
zachaysan

47

我在代码中使用了此功能:

$.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%我的,我在某个地方用Google搜索,然后针对我的应用进行了调整。

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


这也突出显示了插入的文本吗?
奥利弗·史都比

2
但是,当用户将光标移回某处时,该解决方案将行不通:)无论如何,不​​要紧。
思想家

3
您将“ this”用作包装的集合和元素。嗯..只是尝试,它不起作用W / O编辑
斯科特Evernden

4
我也无法使此代码正常工作。我正在使用jQuery。我同时尝试了textarea和文本字段。我相信THIS.VALUE例如应this.val()等。
尼克-

1
是的,在IE上,它一直插入DOM的顶部,而在Fox上,它什么也没做。使用最新的JQuery ...
Caveatrob

19

我知道这是一个老问题,但是对于正在寻找这种解决方案的人们来说,值得注意的是,您不应该使用append()向textarea添加内容。append()方法针对的是innerHTML而不是textarea的值。内容可能会出现在文本区域中,但不会添加到元素的表单值中。

如上所述,使用:

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

会很好的工作。


13

这允许您将一段文本“注入”到文本框中,注入意味着:将文本追加到光标所在的位置。

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>

当我们具有“将标签插入文本”功能时,很有趣,并且更具感觉。

适用于所有浏览器。


5
@temoto:否决非英语变量名吗?它仍然是完全可读的。如果答案无济于事,应该使用向下投票按钮。顺便说一句,当您不赞成投票时,它还会使您失去一些声誉。
Josh M.

花了一些时间来理解西班牙语代码。并且此代码中有一个错误。它总是在文本框的开始而不是结尾处插入。例如:如果文本是:亲爱的用户,在单击时将其插入到亲爱的之前而不是文本用户之后。
2016年

@JoshM。事实是,这是Thinker在这里写的更旧更完整的答案的副本...他删除.focus()selectionStartselectionEnd修改后的一些调用和更新。西班牙变量可能已被用来证明另一个答案的合理性
CPHPython

12

嘿,这是一个修改后的版本,对我来说,在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();
   }
 }
})

10

你有没有尝试过:

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

但是不确定自动突出显示。

编辑

追加:

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

谢谢,我给它一个机会,我是jQuery的新手,所以不了解所有易于使用的功能。
奥利弗·史都比

我也比较新。一旦掌握了它,它既有趣又超级容易。请查看此以获得更多参考:docs.jquery.com/Main_Page
杰森(Jason)

5
如以下Marcus所述,append()不适用于的值textarea。该append()方法的目标是innerHTML,而不是textarea的值。
图拉格2011年

6

您要求的内容在jQuery中应该相当简单明了

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

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

但是,市场上有很多免费的所见即所得HTML / Rich Text编辑器,我敢肯定一个会满足您的需求


5

这是在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');
  });
});

3

它在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;

1

如果您想将内容追加到文本区域而不替换它们,则可以尝试以下操作

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

根据您的情况,

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

0

我认为这样会更好

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

0

如果某些其他脚本在您的情况下不起作用,此处还将介绍另一种解决方案。


0

这类似于@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;
   }
}

0

一个简单的解决方案是:(假设:您希望在文本框中键入的任何内容都可以附加到文本区域中已经存在的内容之后

<a>标记的onClick事件中,编写一个用户定义的函数,该函数将执行以下操作:

function textType(){

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

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

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

}

(其中,ids textId1-用于o / p textArea textId2-用于i / p textbox')


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

-1

我用它,它工作正常:)

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

雷米


1
不,不是。如果更改了textarea的html,则会在其中看到内容,但是在保存FORM时它不起作用,因为表单需要textarea值,而不是内部HTML。
tothemario'4
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.