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

Program / 글쓴이

앵커 태그를 클릭하면 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");
});