Вставте текст у текстову область за допомогою jQuery

Мені цікаво, як я можу вставити текст у текстову область за допомогою jquery після натискання тега якоря.

Я не хочу замінювати текст уже в текстовій області, я хочу додати новий текст до textarea.

З того, що ви маєте в коментарях Джейсона, спробуйте:

$('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. Однак це стосується об'єкта 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');

Я використовую цю функцію у своєму коді:

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

Я знаю, що це давнє питання, але для людей, які шукають це рішення, варто зазначити, що ви не повинні використовувати додаток () для додавання вмісту до текстової області. метод append () націлює на внутрішнійHTML не значення textarea. Вміст може з’являтися в текстовій області, але він не буде доданий до значення форми елемента.

Як зазначено вище, використовуючи:

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

буде добре працювати.

це дозволить вам "ввести" фрагмент тексту в текстове поле, вводить означає: додає текст, де знаходиться курсор.

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>

Смішно і більше сенсу, коли ми маємо функцію "Вставити тег у текст".

працює у всіх браузерах.

Хей, це модифікована версія, яка працює для мене в порядку 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();
   }
 }
})

ти намагався:

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

але не впевнений у автоматичному освітленні.

Редагувати :

Щоб додати:

$("#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заданим кольором на ваш вибір. На наступній вставці ви можете видалити клас із будь-яких існуючих прольотів (або викреслити прольоти).

Однак на ринку доступно безліч безкоштовних редакторів WYSIWYG HTML / Rich Text, я впевнений, що один відповідатиме вашим потребам

• TinyMCE - редактор JavaScript WYSIWYG
• Редактор насиченого тексту - Бібліотека YUI
• 10 jQuery та не-jQuery редакторів Rich Text

Ось швидке рішення, яке працює в jQuery 1.9+:

а) Отримайте позицію каретки:

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

б) Додайте текст у позиції каретки:

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

в) Приклад

$('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').append('Whatever need to be added');

За вашим сценарієм було б

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

Я думаю, що це було б краще

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

Інше рішення також описано тут , в разі , якщо деякі з інших сценаріїв не працює у вашому випадку.

Це схоже на відповідь, яку дав @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;
   }
}

Простим рішенням було б: ( Припущення : ви хочете, щоб усе, що ви вводили всередині текстового поля, додало до того, що вже є в текстовій області )

У події onClick тегу <a> напишіть визначену користувачем функцію, яка робить це:

function textType(){

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

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

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

}

(де ідентифікатори, textId1 - для o / p textArea textId2 -для 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) ;
        }
    }
});

Я це використав, і це працює чудово :)

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

Ремі