Wstaw tekst do obszaru tekstowego za pomocą jQuery

Zastanawiam się, jak mogę wstawić tekst do obszaru tekstowego za pomocą jquery po kliknięciu znacznika kotwicy.

Nie chcę zastępować tekstu znajdującego się już w obszarze tekstowym, chcę dołączyć nowy tekst do obszaru tekstowego.

Z tego, co masz w komentarzach Jasona, spróbuj:

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

Edycja - aby dołączyć do tekstu spójrz poniżej

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

Podoba mi się rozszerzenie funkcji jQuery. Jednakże, to odnosi się do obiektu jQuery nie obiektu Dom. Więc zmodyfikowałem go trochę, aby był jeszcze lepszy (można aktualizować w wielu polach tekstowych / obszarach tekstowych jednocześnie).

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

To działa naprawdę dobrze. Możesz wstawiać w wiele miejsc jednocześnie, na przykład:

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

Używam tej funkcji w moim kodzie:

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

Nie jest w 100% mój, szukałem go gdzieś w Google, a następnie dostroiłem do mojej aplikacji.

Stosowanie: $('#element').insertAtCaret('text');

Wiem, że to stare pytanie, ale dla osób szukających tego rozwiązania warto zauważyć, że nie należy używać metody append () do dodawania treści do obszaru tekstowego. metoda append () odnosi się do innerHTML, a nie wartości textarea. Treść może pojawić się w obszarze tekstowym, ale nie zostanie dodana do wartości formularza elementu.

Jak wspomniano powyżej, używając:

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

będzie działać dobrze.

ten pozwala na "wstrzyknięcie" fragmentu tekstu do pola tekstowego, wstrzyknięcie oznacza: dołącza tekst w miejscu, w którym znajduje się kursor.

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

Możesz go używać w ten sposób:

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

Zabawne i bardziej sensowne, gdy mamy funkcję „Wstaw znacznik do tekstu”.

działa we wszystkich przeglądarkach.

Hej to zmodyfikowana wersja, która u mnie działa OK w FF @least i wstawia w pozycji karetki

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

czy próbowałeś:

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

nie jestem jednak pewien co do automatycznego podświetlania.

EDYCJA :

Dołączyć:

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

To, o co prosisz, powinno być dość proste w jQuery-

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

Najlepszym sposobem, w jaki przychodzi mi do głowy, aby wyróżnić wstawiony tekst, jest zawijanie go w rozpiętość klasą CSS z background-colorustawionym na wybrany kolor. Przy następnym wstawieniu możesz usunąć klasę z istniejących rozpiętości (lub usunąć rozpiętość).

Jednak na rynku dostępnych jest wiele darmowych edytorów WYSIWYG HTML / Rich Text, jestem pewien, że jeden będzie odpowiadał Twoim potrzebom

• TinyMCE - edytor JavaScript WYSIWYG
• Edytor tekstu sformatowanego - Biblioteka YUI
• 10 edytorów tekstu sformatowanego JavaScript jQuery i innych niż jQuery

Oto szybkie rozwiązanie, które działa w jQuery 1.9+:

a) Uzyskaj pozycję opiekuna:

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) Dołącz tekst w pozycji daszka:

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) Przykład

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

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

U mnie działa dobrze w 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;

Jeśli chcesz dołączyć zawartość do obszaru tekstu bez ich zastępowania, możesz wypróbować poniższe

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

Zgodnie z twoim scenariuszem tak będzie

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

Myślę, że tak byłoby lepiej

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

Inne rozwiązanie jest opisane również tutaj, na wypadek gdyby niektóre inne skrypty nie działały w Twoim przypadku.

Jest to podobne do odpowiedzi udzielonej przez @panchicore z naprawionym drobnym błędem.

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

Prostym rozwiązaniem byłoby: ( Wniebowzięcie : Chcesz cokolwiek wpiszesz wewnątrz pola tekstowego , aby dołączone do tego, co już istnieje w textarea )

W zdarzeniu onClick tagu <a> napisz funkcję zdefiniowaną przez użytkownika, która robi to:

function textType(){

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

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

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

}

(gdzie identyfikatory, textId1 - dla 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) ;
        }
    }
});

Użyłem tego i działa dobrze :)

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

Remi