Wstaw tekst do obszaru tekstowego za pomocą jQuery


151

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.


1
Jeśli to jest rozwiązanie - wolałabym jednak zbudować je w sobie. To jest dla osobistego bloga, który robię dla przyjaciela, więc wszystko, co pasuje do tego.
Oliver Stubley

więc chcesz zaznaczyć tekst, a którykolwiek z nich został wybrany, użyj jQuery do wypełnienia obszaru tekstu, jeśli tak, skąd pochodzi ten tekst, wprowadzony ręcznie lub ze specjalnego tagu?
TStamper

TStamper, chcę móc kliknąć przycisk iw zależności od tego, co kliknięto, wstawić tekst do obszaru tekstu.
Oliver Stubley

więc jeśli klikniesz przycisk oznaczony jako „pogrubiony”, chcesz pogrubić w obszarze tekstu?
TStamper

Nie pogrubiony tekst, ale pogrubione tagi (prawdopodobnie niestandardowe w przeciwieństwie do html)
Oliver Stubley

Odpowiedzi:


125

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

sprawdź moją odpowiedź na znacznie łatwiejszy sposób dołączania tekstu
Jason

8
@ Jason- przepraszam, nieprawda, dołączanie oczekuje danych html zaczynających się od elementu html, np .: <p
TStamper

Co powiesz na to, że wynik pochodzi ze strony PHP i jest obsługiwany przez jQuery? (między danymi przesyłane są za pomocą Json)
Abu Rayane

186

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

3
W odpowiedzi pojawia się koniec}), więc początkowo myślałem, że to rozwiązanie nie działa, ale po naprawieniu działa świetnie w IE7 i FF3.5. Możesz wstawić fragment tekstu pod daszkiem dla elementu TEXTAREA. Dziękuję Ci!
Philippe

1
działa to również w Chrome. dzięki za zaoszczędzenie mi czasu :) i dziękuję @Thinker za oryginalny kod.
Veli Gebrev

Przyszedłem tu z wyszukiwarki Google ... Wiem, że Twoja odpowiedź ma rok, ale bardzo za to dziękuję. Działa jak urok
Mike Turley.

6
Czy selma być globalny?
qwertymk

1
Dla każdego, kto chce wersji coffeescript
zachaysan

47

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


Czy to również wyróżnia wstawiony tekst?
Oliver Stubley

2
Ale to rozwiązanie nie zadziała, gdy użytkownik przesunie kursor gdzieś w tył :) W każdym razie, nieważne.
Thinker

3
używasz „this” zarówno jako opakowanego zestawu, jak i elementu. hmmm ... właśnie próbowałem i nie działa bez zmian
Scott Evernden

4
Ten kod też nie działał. Używam jQuery. Wypróbowałem zarówno textarea, jak i pole tekstowe. Uważam, że na przykład this.value powinno być this.val () itd.
Nick,

1
Tak, w IE, to ciągle wstawiało u góry DOM, a na Foxie nic nie dało. Korzystam z najnowszego JQuery ...
Caveatrob

19

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.


13

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.


5
@temoto: Głos w dół dla nazw zmiennych innych niż angielskie? Nadal jest całkowicie czytelny w obecnym stanie. Przycisk głosowania w dół powinien być używany, jeśli odpowiedź nie jest pomocna, co nie ma miejsca w tym przypadku. Swoją drogą, to również kosztuje cię trochę reputacji, gdy głosujesz przeciw.
Josh M.

Zrozumienie hiszpańskiego kodu zajęło trochę czasu. i jest błąd w tym kodzie. To było wstawianie zawsze w kierunku początku pola tekstowego, a nie pod koniec. Na przykład: Jeśli tekst to: Drogi użytkowniku i po kliknięciu, wstawiany był przed kochanie, a nie za użytkownikiem tekstu.
Dev

@JoshM. chodzi o to, że jest to duplikat starszej i pełniejszej odpowiedzi napisanej tutaj przez Myśliciela ... Wyjął niektóre .focus()inwokacje i aktualizacje do selectionStarti selectionEndpo modyfikacji. Hiszpańskie zmienne mogły zostać użyte do uzasadnienia innej odpowiedzi ...
CPHPython,

12

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

10

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

Dzięki, spróbuję, jestem nowy w jQuery, więc nie znam wszystkich łatwych w użyciu funkcji.
Oliver Stubley

ja też jestem stosunkowo nowy. to zabawne i super łatwe, gdy już to zrozumiesz. Sprawdź to, aby uzyskać więcej informacji: docs.jquery.com/Main_Page
Jason,

5
Jak zauważył Marcus poniżej, append()nie działa na wartość a textarea. append()Metoda kierowana innerHTML, a nie wartość pola tekstowego.
Turadg

6

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


5

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

3

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;

1

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

0

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

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

0

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


0

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

0

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 ')


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

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

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

Remi


1
Nie, nie ma. Jeśli zmienisz kod HTML obszaru tekstowego, zobaczysz tam zawartość, ale kiedy zapiszesz FORMULARZ, nie działa, ponieważ formularz wymaga wartości textarea, a nie wewnętrznego kodu HTML.
tothemario
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.