jQuery를 사용하여 텍스트를 텍스트 영역에 삽입

앵커 태그를 클릭하면 jquery를 사용하여 텍스트 영역에 텍스트를 삽입하는 방법이 궁금합니다.

텍스트 영역에 이미있는 텍스트를 바꾸고 싶지 않고 텍스트 영역에 새 텍스트를 추가하고 싶습니다.

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

나는 jQuery 함수 확장을 좋아한다. 그러나 이것은 DOM 객체가 아닌 jQuery 객체를 나타냅니다. 그래서 나는 그것을 더 좋게하기 위해 조금 수정했습니다 (여러 개의 텍스트 상자 / 텍스트 영역에서 한 번에 업데이트 할 수 있음).

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 ()를 사용해서는 안된다는 점에 주목할 가치가 있습니다. append () 메소드는 textarea의 값이 아닌 innerHTML을 대상으로합니다. 내용은 텍스트 영역에 나타날 수 있지만 요소의 양식 값에 추가되지는 않습니다.

위에서 언급했듯이 다음을 사용하십시오.

$('#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>

"텍스트에 태그 삽입"기능이 있으면 재미 있고 더 많은 문장을 갖게됩니다.

모든 브라우저에서 작동합니다.

Hej 이것은 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 / 리치 텍스트 편집기가 많이 있습니다.

• TinyMCE -JavaScript WYSIWYG 편집기
• 서식있는 텍스트 편집기 -YUI 라이브러리
• jQuery 및 jQuery가 아닌 JavaScript 리치 텍스트 편집기 10 개

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

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

간단한 해결책은 다음과 같습니다. ( 가정 : 텍스트 상자에 입력 한 내용 을 텍스트 영역에 이미있는 것에 추가하기를 원합니다 )

<a> 태그 의 onClick 이벤트에서 다음을 수행하는 사용자 정의 함수를 작성하십시오.

function textType(){

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

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

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

}

(여기서 id, textId1 -o / p textArea의 경우 textId2- i / p 텍스트 상자의 경우)

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

레미