Chèn văn bản vào textarea với jQuery

Tôi đang tự hỏi làm thế nào tôi có thể chèn văn bản vào một vùng văn bản bằng cách sử dụng jquery, khi nhấp vào thẻ neo.

Tôi không muốn thay thế văn bản đã có trong textarea, tôi muốn nối văn bản mới vào textarea.

Từ những gì bạn có trong nhận xét của Jason hãy thử:

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

Chỉnh sửa- Để thêm vào văn bản, hãy nhìn vào bên dưới

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

Tôi thích phần mở rộng hàm jQuery. Tuy nhiên, điều này đề cập đến đối tượng jQuery không phải là đối tượng DOM. Vì vậy, tôi đã sửa đổi nó một chút để làm cho nó thậm chí tốt hơn (có thể cập nhật trong nhiều hộp văn bản / textareas cùng một lúc).

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

Điều này hoạt động thực sự tốt. Bạn có thể chèn vào nhiều nơi cùng một lúc, như:

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

Tôi sử dụng chức năng này trong mã của tôi:

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

Nó không phải là của tôi 100%, tôi đã googled nó ở đâu đó và sau đó điều chỉnh cho ứng dụng của tôi.

Sử dụng: $('#element').insertAtCaret('text');

Tôi biết đây là một câu hỏi cũ nhưng đối với những người tìm kiếm giải pháp này, điều đáng chú ý là bạn không nên sử dụng append () để thêm nội dung vào vùng văn bản. phương thức append () nhắm vào bên trongHTML chứ không phải giá trị của textarea. Nội dung có thể xuất hiện trong vùng văn bản nhưng nó sẽ không được thêm vào giá trị biểu mẫu của phần tử.

Như đã lưu ý ở trên bằng cách sử dụng:

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

sẽ hoạt động tốt

cái này cho phép bạn "tiêm" một đoạn văn bản vào hộp văn bản, nghĩa là tiêm: nối thêm văn bản nơi con trỏ đang ở.

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

Và bạn có thể sử dụng nó như thế này:

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

Hài hước và có nhiều ý nghĩa hơn khi chúng ta có chức năng "Chèn thẻ vào văn bản".

hoạt động trong tất cả các trình duyệt.

Hej đây là phiên bản sửa đổi hoạt động tốt trong FF @least cho tôi và chèn vào vị trí dấu mũ

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

bạn đã thử chưa

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

không chắc chắn về autohighlighting, mặc dù.

BIÊN TẬP :

Để thêm:

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

Những gì bạn yêu cầu phải hợp lý đơn giản trong jQuery-

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

Cách tốt nhất mà tôi có thể nghĩ đến để làm nổi bật văn bản được chèn là bằng cách gói nó trong một khoảng bằng một lớp CSS với background-color được đặt thành màu bạn chọn. Ở lần chèn tiếp theo, bạn có thể xóa lớp khỏi bất kỳ nhịp hiện có nào (hoặc loại bỏ các nhịp).

Tuy nhiên, có rất nhiều trình soạn thảo WYSIWYG HTML / Rich Text miễn phí có sẵn trên thị trường, tôi chắc chắn rằng một trình soạn thảo sẽ phù hợp với nhu cầu của bạn

• TinyMCE - Trình soạn thảo JavaScript WYSIWYG
• Trình soạn thảo văn bản phong phú - Thư viện YUI
• 10 Trình soạn thảo văn bản giàu JavaScript và không phải jQuery

Đây là một giải pháp nhanh chóng hoạt động trong jQuery 1.9+:

a) Nhận vị trí caret:

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) Nối văn bản tại vị trí dấu mũ:

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) Ví dụ

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

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

Nó hoạt động tốt với tôi trong 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;

Nếu bạn muốn nối thêm nội dung vào vùng văn bản mà không thay thế chúng, bạn có thể thử cách bên dưới

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

Theo kịch bản của bạn, nó sẽ là

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

Tôi nghĩ rằng điều này sẽ tốt hơn

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

Một giải pháp khác cũng được mô tả ở đây trong trường hợp một số tập lệnh khác không hoạt động trong trường hợp của bạn.

Điều này tương tự với câu trả lời được đưa ra bởi @panchicore với một lỗi nhỏ đã được sửa.

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

Giải pháp đơn giản sẽ là: ( Giả định : Bạn muốn bất cứ thứ gì bạn nhập vào trong hộp văn bản để được thêm vào những gì đã có trong textarea )

Trong sự kiện onClick của thẻ <a>, hãy viết một hàm do người dùng xác định, thực hiện điều này:

function textType(){

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

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

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

}

(trong đó id, textId1 - cho văn bản o / pArea textId2 -cho 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) ;
        }
    }
});

Tôi đã sử dụng nó và nó hoạt động tốt :)

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

Remi