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

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

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

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

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

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

코드에서 이 기능을 사용합니다.

$.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) 방법은 내부를 대상으로 합니다.텍스트 영역의 값이 HTML이 아닙니다.내용은 텍스트 영역에 나타날 수 있지만 요소의 양식 값에는 추가되지 않습니다.

위에서 언급한 대로 다음을 사용합니다.

$('#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에서 @최소한 나에게 OK로 작동하고 카트 위치에 삽입하는 수정된 버전입니다.

  $.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선택한 색상으로 설정합니다.다음 삽입 시 기존 스팬에서 클래스를 제거하거나 스팬을 제거할 수 있습니다.

하지만 시중에는 무료 위지위그 HTML/리치 텍스트 편집기가 많이 있습니다. 당신의 요구에 맞는 편집기가 있을 것이라고 확신합니다.

• 티니 MCE - 자바스크립트 위지위그 에디터
• 리치 텍스트 편집기 - YUI 라이브러리
• 10개의 jQuery 및 non-jQuery JavaScript 리치 텍스트 편집기

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

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

< a > 태그의 onClick 이벤트에서 사용자 정의 함수를 작성합니다. 이 함수는 다음과 같습니다.

function textType(){

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

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

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

}

(여기서 ids,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");

레미

언급URL : https://stackoverflow.com/questions/946534/insert-text-into-textarea-with-jquery