복붙노트

[JQUERY] jQuery로 텍스트 영역에 텍스트를 삽입

JQUERY

jQuery로 텍스트 영역에 텍스트를 삽입

해결법

  1. 1.당신이 제이슨의 의견이 무엇인지부터 시도 :

    당신이 제이슨의 의견이 무엇인지부터 시도 :

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

  2. 2.JQuery와 기능 확장과 같은 I. 그러나,이 jQuery 오브젝트가 아닌 DOM 객체를 참조. 나는 그것을 조금 수정 한 그래서 그것이 더 나은 (한 번에 여러 텍스트 상자 / 텍스트 영역에서 업데이트 할 수 있습니다) 확인합니다.

    JQuery와 기능 확장과 같은 I. 그러나,이 jQuery 오브젝트가 아닌 DOM 객체를 참조. 나는 그것을 조금 수정 한 그래서 그것이 더 나은 (한 번에 여러 텍스트 상자 / 텍스트 영역에서 업데이트 할 수 있습니다) 확인합니다.

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

  3. 3.난 내 코드에서이 기능을 사용 :

    난 내 코드에서이 기능을 사용 :

    {(.fn.extend $ insertAtCaret : 함수 (myValue) { this.each (함수 () { 경우 (을 document.selection) { this.focus (); VAR의 SEL은 document.selection.createRange을 () =; myValue한다 sel.Text =; this.focus (); } 다른 경우 (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; } 다른 { this.value + = myValue; this.focus (); } }); 이를 반환; } }); 입력 {폭 : 100 픽셀} 라벨 {디스플레이 : 블록; 마진 : 10px 0} <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <라벨> 복사 텍스트로부터 <라벨> 삽입 텍스트 <입력 ID = "in2ins"TYPE = "텍스트"값 = "1,2,3"오토> <버튼의 onclick = "$ ( '#의 in2ins'). insertAtCaret ($ ( '#의 in2copy'). 발 ())"삽입>

    내가 어딘가에 다음 내 앱 조정 인터넷 검색, 100 % 내 아니에요.

    사용법 :. $ ( '# 요소') insertAtCaret ( '텍스트');

  4. 4.나는이 오래된 질문이지만,이 솔루션을 사용하면 APPEND 사용하지 않도록주의하는 그것의 가치를 검색하는 사람들을 위해 () 텍스트 영역에 내용을 추가하는 것을 알고있다. 추가] () 메소드는 텍스트 영역의 innerHTML을 아닌 값을 목표로하고있다. 내용은 텍스트 영역에 나타날 수 있지만 요소의 형태 값에 추가되지 않습니다.

    나는이 오래된 질문이지만,이 솔루션을 사용하면 APPEND 사용하지 않도록주의하는 그것의 가치를 검색하는 사람들을 위해 () 텍스트 영역에 내용을 추가하는 것을 알고있다. 추가] () 메소드는 텍스트 영역의 innerHTML을 아닌 값을 목표로하고있다. 내용은 텍스트 영역에 나타날 수 있지만 요소의 형태 값에 추가되지 않습니다.

    사용하여 상술 한 바와 같이 :

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

    잘 작동합니다.

  5. 5.커서가있는 곳에 텍스트를 추가 :이 하나는 "주입"텍스트 상자에 텍스트의 조각, 분사 수단이 있습니다.

    커서가있는 곳에 텍스트를 추가 :이 하나는 "주입"텍스트 상자에 텍스트의 조각, 분사 수단이 있습니다.

    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>

    우리는 "텍스트에 태그 삽입"기능이있을 때 재미와 더 의미가있다.

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

  6. 6.HEJ 이것은 캐럿 위치에 나와 삽입에 대한 FF의 @least에서 확인을 작동하는 수정 된 버전입니다

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

  7. 7.당신이 시도가 :

    당신이 시도가 :

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

    확실하지하지만 autohighlighting 약.

    편집하다:

    추가하려면 :

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

  8. 8.당신이 합리적으로 jQuery-에 간단합니다 요청

    당신이 합리적으로 jQuery-에 간단합니다 요청

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

    내가 삽입 된 텍스트를 강조 생각할 수있는 가장 좋은 방법은 당신의 선택의 색상과 배경 색상 세트와 CSS 클래스와 스팬에 포장입니다. 다음 삽입에, 당신은 기존의 스팬에서 클래스를 제거 (또는 스팬을 제거) 할 수있다.

    그러나, 무료 WYSIWYG HTML의 많음 / 서식있는 텍스트 편집기를 사용할 수있는 시장이있다, 나는 확실히 하나가 사용자의 요구에 맞는 해요

  9. 9.여기 1.9+ jQuery를 작동하는 빠른 솔루션입니다 :

    여기 1.9+ jQuery를 작동하는 빠른 솔루션입니다 :

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

  10. 10.그것은 크롬 20.0.11에 나를 위해 좋은 작동

    그것은 크롬 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;

  11. 11.당신이 그들을 교체하지 않고 텍스트 영역에 내용을 추가하려면, 당신은 아래에 시도 할 수 있습니다

    당신이 그들을 교체하지 않고 텍스트 영역에 내용을 추가하려면, 당신은 아래에 시도 할 수 있습니다

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

    시나리오에 따르면이 될 것이다

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

  12. 12.나는이 더 좋을 것 같아

    나는이 더 좋을 것 같아

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

  13. 13.또 다른 해결 방법은 경우에 작동하지 않는 경우도 여기에 다른 스크립트의 일부를 설명합니다.

    또 다른 해결 방법은 경우에 작동하지 않는 경우도 여기에 다른 스크립트의 일부를 설명합니다.

  14. 14.이것은 고정 사소한 버그와 @panchicore에 의해 주어진 답과 유사하다.

    이것은 고정 사소한 버그와 @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;
   }
}

  15. 15.간단한 해결책은 다음과 같습니다 (가정 : 당신은 텍스트 영역에 이미있는 당신이 추가 얻을 수있는 텍스트 상자 안에 입력 무엇이든 원하는)

    간단한 해결책은 다음과 같습니다 (가정 : 당신은 텍스트 영역에 이미있는 당신이 추가 얻을 수있는 텍스트 상자 안에 입력 무엇이든 원하는)

    의 태그 onclick 이벤트에서,이있는 사용자 정의 함수를 작성 :

    function textType(){

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

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

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

}

    (여기서, IDS textId1-위한 O / P textArea의 textId2-대한 I / P 입력란 ')

  16. 16.

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

  17. 17.나는 그것을 사용하고 그것을 잘 작동 :)

    나는 그것을 사용하고 그것을 잘 작동 :)

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

    레미

    18. from https://stackoverflow.com/questions/946534/insert-text-into-textarea-with-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 창 크기 조정에 jQuery를  (0) 2020.10.11
[JQUERY] 적절한 방법은 강력한 형식의 MVC 3보기에서 패스 모델에 JQuery와에 AJAX 포스트를 사용하는  (0) 2020.10.11
[JQUERY] jQuery를는 .click - 패스 파라미터를 사용자 함수  (0) 2020.10.11
[JQUERY] 있는 jqGrid 필요 하이퍼 링크 - jQuery를 통해 캡처 값 필요  (0) 2020.10.11
[JQUERY] 문자열을 반환하는 ASP.NET MVC $ .post 호출 ...있는 jqGrid에 대한 형식 도움이 필요  (0) 2020.10.11
,

티스토리툴바