[JQUERY] 커서가 자바 스크립트를 사용하는 텍스트를 삽입 / JQuery와

커서가 자바 스크립트를 사용하는 텍스트를 삽입 / JQuery와

해결법

1. ---

   1.여기에서 이것을 사용합니다 :

   여기에서 이것을 사용합니다 :

   함수 insertAtCaret (areaId 텍스트) { VAR txtarea = document.getElementById를 (areaId); 만약 (!의 txtarea) { 반환; } VAR scrollPos = txtarea.scrollTop; VAR의 strPos = 0; var에 BR = ((txtarea.selectionStart || txtarea.selectionStart == 0)? "FF"(을 document.selection "즉,"거짓?)); 경우 (BR == "예") { txtarea.focus (); VAR 범위를 document.selection.createRange () =; range.moveStart ( '문자', -txtarea.value.length); strPos = range.text.length; } 다른 경우 (BR == "FF") { strPos = txtarea.selectionStart; } VAR 전면 = (txtarea.value) (0, strPos) .substring; VAR 백 = (txtarea.value) .substring (strPos, txtarea.value.length); txtarea.value = 앞에 텍스트 + + 백; strPos = strPos text.length +; 경우 (BR == "예") { txtarea.focus (); VAR ieRange document.selection.createRange = (); ieRange.moveStart ( '문자', -txtarea.value.length); ieRange.moveStart ( '문자', strPos); ieRange.moveEnd ( '문자', 0); ieRange.select (); } 다른 경우 (BR == "FF") { txtarea.selectionStart는 strPos를 =; txtarea.selectionEnd = strPos; txtarea.focus (); } txtarea.scrollTop는 scrollPos를 =; } <텍스트 영역이 ID = "textareaid"> 삽입 에 여기를 클릭하십시오

2. ---

   2.어쩌면 짧은 버전은 이해하기 쉬울 것?

   어쩌면 짧은 버전은 이해하기 쉬울 것?

   jQuery를 ( "#의 BTN"). (함수를 '클릭'에 () { VAR $ TXT = jQuery를 ( "#의 TXT"); VAR caretPos = $ TXT [0] .selectionStart; VAR textAreaTxt = $ txt.val (); VAR txtToAdd는 "물건을"=; $ txt.val (textAreaTxt.substring (0 caretPos) + txtToAdd + textAreaTxt.substring (caretPos)); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> <텍스트 영역 ID = "TXT"행 = "15"COLS = "70"> 일부 텍스트가 여기에 있습니다.

   내가 jQuery로 포인터의 현재 위치에서 텍스트 상자에 텍스트를 추가하는 방법에 대한 응답으로 쓴?

3. ---

   3.조지 클 레그혼에서 승인 된 대답은 간단 커서 위치에 텍스트를 삽입하는 큰했다. 사용자가 비록 텍스트를 선택했고, 그 텍스트 (대부분의 텍스트와 기본 경험)를 교체하려는 경우, 당신은 '다시'변수를 설정할 때 작은 변화를 확인해야합니다.

   조지 클 레그혼에서 승인 된 대답은 간단 커서 위치에 텍스트를 삽입하는 큰했다. 사용자가 비록 텍스트를 선택했고, 그 텍스트 (대부분의 텍스트와 기본 경험)를 교체하려는 경우, 당신은 '다시'변수를 설정할 때 작은 변화를 확인해야합니다.

   당신이 IE의 이전 버전을 지원하기 위해 필요하지 않은 경우 또한, 현대 버전은 브라우저 감지 모두를 취할 수 있도록 textarea.selectionStart을 지원하고, IE 전용 코드입니다.

   여기에 단순화 된 적어도 크롬과 IE11 작동 버전, 선택한 텍스트를 교체 핸들입니다.

   function insertAtCaret(areaId, text) {
       var txtarea = document.getElementById(areaId);
       var scrollPos = txtarea.scrollTop;
       var caretPos = txtarea.selectionStart;
   
       var front = (txtarea.value).substring(0, caretPos);
       var back = (txtarea.value).substring(txtarea.selectionEnd, txtarea.value.length);
       txtarea.value = front + text + back;
       caretPos = caretPos + text.length;
       txtarea.selectionStart = caretPos;
       txtarea.selectionEnd = caretPos;
       txtarea.focus();
       txtarea.scrollTop = scrollPos;
   }
   

4. ---

   4.위의 코드는 IE에서 나를 위해 작동하지 않았다. 다음은이 답변에 따라 일부 코드입니다.

   위의 코드는 IE에서 나를 위해 작동하지 않았다. 다음은이 답변에 따라 일부 코드입니다.

   나는 다른 방법으로 요소를 참조 할 수 있도록 전에서 getElementById을했다.

   insertAtCaret 기능 (요소, 텍스트) { 경우 (을 document.selection) { element.focus (); VAR의 SEL은 document.selection.createRange을 () =; 한다 sel.Text = 텍스트; element.focus (); } 다른 경우 (element.selectionStart || element.selectionStart === 0) { VAR startPos = element.selectionStart; VAR endpos는 = element.selectionEnd; VAR scrollTop = element.scrollTop; element.value element.value.substring = (0, startPos) + 텍스트 + element.value.substring (endpos는, element.value.length); element.focus (); element.selectionStart = startPos text.length +; element.selectionEnd = startPos text.length +; element.scrollTop는 scrollTop를 =; } 다른 { element.value + = 텍스트; element.focus (); } } 입력 {폭 : 100 픽셀} 라벨 {디스플레이 : 블록; 마진 : 10px 0} <레이블 = "in2copy">의 텍스트 복사 <입력 식 TYPE = "텍스트"값 "in2copy"= "X"> <= "in2ins"레이블> 요소는 삽입 <입력 자료 = "in2ins"TYPE = "텍스트"값 = "1,2,3"오토> <버튼의 onclick = "insertAtCaret (document.getElementById를 ( 'in2ins') document.getElementById를 ( 'in2copy'). 값)"삽입>

   편집 : 실행중인 코드 조각 추가는, jQuery를 사용되지 않습니다.

5. ---

   5.@quick_sliv 대답을 사용하여 :

   @quick_sliv 대답을 사용하여 :

   function insertAtCaret(el, text) {
       var caretPos = el.selectionStart;
       var textAreaTxt = el.value;
       el.value = textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos);
   };
   

6. ---

   6.JQuery와 자바 스크립트를 통해 텍스트 상자의 현재 커서 위치에 텍스트를 삽입하는 방법

   JQuery와 자바 스크립트를 통해 텍스트 상자의 현재 커서 위치에 텍스트를 삽입하는 방법

   방법

   여기에 나는이 텍스트 상자와 버튼이있다. 나는에서 텍스트를 붙여 텍스트 상자에 특정 위치를 클릭하고 다음 버튼을 클릭해야 이전 텍스트 상자의 위치에 다른 텍스트 상자.

   여기에 주요 문제는 우리가 텍스트를 붙여 넣 현재 커서 위치를 받고 있다는 것입니다.

   //Textbox on which to be pasted
   <input type="text" id="txtOnWhichToBePasted" />
   
   //Textbox from where to be pasted
   <input type="text" id="txtFromWhichToBePasted" />
   
   
   //Button on which click the text to be pasted
   <input type="button" id="btnInsert" value="Insert"/>
   
   
   <script type="text/javascript">
   
   $(document).ready(function () {
       $('#btnInsert').bind('click', function () {
               var TextToBePasted = $('#txtFromWhichToBePasted').value;
               var ControlOnWhichToBePasted = $('#txtOnWhichToBePasted');
   
               //Paste the Text
               PasteTag(ControlOnWhichToBePasted, TextToBePasted);
           });
       });
   
   //Function Pasting The Text
   function PasteTag(ControlOnWhichToBePasted,TextToBePasted) {
       //Get the position where to be paste
   
       var CaretPos = 0;
       // IE Support
       if (document.selection) {
   
           ControlOnWhichToBePasted.focus();
           var Sel = document.selection.createRange();
   
           Sel.moveStart('character', -ctrl.value.length);
   
           CaretPos = Sel.text.length;
       }
       // Firefox support
       else if (ControlOnWhichToBePasted.selectionStart || ControlOnWhichToBePasted.selectionStart == '0')
           CaretPos = ControlOnWhichToBePasted.selectionStart;
   
       //paste the text
       var WholeString = ControlOnWhichToBePasted.value;
       var txt1 = WholeString.substring(0, CaretPos);
       var txt2 = WholeString.substring(CaretPos, WholeString.length);
       WholeString = txt1 + TextToBePasted + txt2;
       var CaretPos = txt1.length + TextToBePasted.length;
       ControlOnWhichToBePasted.value = WholeString;
   
       //update The cursor position 
       setCaretPosition(ControlOnWhichToBePasted, CaretPos);
   }
   
   function setCaretPosition(ControlOnWhichToBePasted, pos) {
   
       if (ControlOnWhichToBePasted.setSelectionRange) {
           ControlOnWhichToBePasted.focus();
           ControlOnWhichToBePasted.setSelectionRange(pos, pos);
       }
       else if (ControlOnWhichToBePasted.createTextRange) {
           var range = ControlOnWhichToBePasted.createTextRange();
           range.collapse(true);
           range.moveEnd('character', pos);
           range.moveStart('character', pos);
           range.select();
       }
   }
   
   </script>
   

7. ---

   7.현재 커서 위치에 추가 텍스트는 두 단계를 포함한다 :

   현재 커서 위치에 추가 텍스트는 두 단계를 포함한다 :

   데모 : https://codepen.io/anon/pen/qZXmgN

   크롬 48, 파이어 폭스 (45), IE (11)과 에지 (25)에 테스트

   JS :

   function addTextAtCaret(textAreaId, text) {
       var textArea = document.getElementById(textAreaId);
       var cursorPosition = textArea.selectionStart;
       addTextAtCursorPosition(textArea, cursorPosition, text);
       updateCursorPosition(cursorPosition, text, textArea);
   }
   function addTextAtCursorPosition(textArea, cursorPosition, text) {
       var front = (textArea.value).substring(0, cursorPosition);
       var back = (textArea.value).substring(cursorPosition, textArea.value.length);
       textArea.value = front + text + back;
   }
   function updateCursorPosition(cursorPosition, text, textArea) {
       cursorPosition = cursorPosition + text.length;
       textArea.selectionStart = cursorPosition;
       textArea.selectionEnd = cursorPosition;
       textArea.focus();    
   }
   

   HTML :

   <div>
       <button type="button" onclick="addTextAtCaret('textArea','Apple')">Insert Apple!</button>
       <button type="button" onclick="addTextAtCaret('textArea','Mango')">Insert Mango!</button>
       <button type="button" onclick="addTextAtCaret('textArea','Orange')">Insert Orange!</button>
   </div>
   <textarea id="textArea" rows="20" cols="50"></textarea>
   

8. ---

   8.난 당신이 마지막에 초점을 맞춘 텍스트 상자를 추적하기 위해 다음과 같은 자바 스크립트를 사용할 수 있다고 생각 :

   난 당신이 마지막에 초점을 맞춘 텍스트 상자를 추적하기 위해 다음과 같은 자바 스크립트를 사용할 수 있다고 생각 :

   <script>
   var holdFocus;
   
   function updateFocus(x)
   {
       holdFocus = x;
   }
   
   function appendTextToLastFocus(text)
   {
       holdFocus.value += text;
   }
   </script>
   

   용법:

   <input type="textbox" onfocus="updateFocus(this)" />
   <a href="#" onclick="appendTextToLastFocus('textToAppend')" />
   

   이전의 솔루션 (gclaghorn에 소품) 텍스트 영역을 사용하고 당신이 원하는 무엇을 더 할 수 있도록, 너무 커서의 위치를 ​​계산합니다. 즉 당신이 찾고있는 거라면 다른 한편으로,이 하나 더 가벼운 것입니다.

9. ---

   9.허용 대답은 인터넷 익스플로러 9에 나를 위해 작동하지 않았다. 내가 인터넷 익스플로러에서 살 때 그것을 확인하고 브라우저 감지가 제대로 작동하지 않는, 그것은 (파이어 폭스) FF 발견했습니다.

   허용 대답은 인터넷 익스플로러 9에 나를 위해 작동하지 않았다. 내가 인터넷 익스플로러에서 살 때 그것을 확인하고 브라우저 감지가 제대로 작동하지 않는, 그것은 (파이어 폭스) FF 발견했습니다.

   난 그냥이 변경을했다 :

   if ($.browser.msie) 
   

   대신에:

   if (br == "ie") { 
   

   결과 코드는 하나입니다 :

   function insertAtCaret(areaId,text) {
       var txtarea = document.getElementById(areaId);
       var scrollPos = txtarea.scrollTop;
       var strPos = 0;
       var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
           "ff" : (document.selection ? "ie" : false ) );
   
       if ($.browser.msie) { 
           txtarea.focus();
           var range = document.selection.createRange();
           range.moveStart ('character', -txtarea.value.length);
           strPos = range.text.length;
       }
       else if (br == "ff") strPos = txtarea.selectionStart;
   
       var front = (txtarea.value).substring(0,strPos);  
       var back = (txtarea.value).substring(strPos,txtarea.value.length); 
       txtarea.value=front+text+back;
       strPos = strPos + text.length;
       if (br == "ie") { 
           txtarea.focus();
           var range = document.selection.createRange();
           range.moveStart ('character', -txtarea.value.length);
           range.moveStart ('character', strPos);
           range.moveEnd ('character', 0);
           range.select();
       }
       else if (br == "ff") {
           txtarea.selectionStart = strPos;
           txtarea.selectionEnd = strPos;
           txtarea.focus();
       }
       txtarea.scrollTop = scrollPos;
   }
   

10. ---

    10.이 jQuery 플러그인은 당신에게 선택 / 캐럿 조작의 미리 만들어진 방법을 제공합니다.

    이 jQuery 플러그인은 당신에게 선택 / 캐럿 조작의 미리 만들어진 방법을 제공합니다.

11. ---

    11.당신은 단지 거기에 텍스트 삽입 필요한 텍스트 상자을 집중할 수 있습니다. 초점 AFAIK 어디에 있는지 찾을 수있는 방법이 없다 (어쩌면 모든 DOM 노드를 통해 interating는?).

    당신은 단지 거기에 텍스트 삽입 필요한 텍스트 상자을 집중할 수 있습니다. 초점 AFAIK 어디에 있는지 찾을 수있는 방법이 없다 (어쩌면 모든 DOM 노드를 통해 interating는?).

    이 유래를 확인 - 그것은 당신을위한 솔루션을 제공합니다 : 어떻게 포커스가있는 DOM 요소를 찾을 수 있습니까?

12. ---

    12.내용 편집, HTML 또는 기타 DOM 요소 선택

    내용 편집, HTML 또는 기타 DOM 요소 선택

    당신이 캐럿에 삽입하려고하는 경우 이 훨씬 더 어려워진다, 편집 가능한 컨테이너 내 아이가 특히.

    나는 배회하는 라이브러리를 사용하여 정말 좋은 행운이 있었다 :

    그것은 같은 훌륭한 기능의 톤이있다 :

    온라인 데모는 그러나 REPO가 데모를 작업했다, 마지막으로 내가 확인 작업을하지 않았습니다. 간단한 다운로드 힘내 또는 NPM에서 리포 연 다음 ./rangy/demos/index.html를 시작하려면

    그것은 캐럿 POS 및 텍스트 선택 산들 바람과 함께 작업하게!

13. ---

    13.이 질문의 대답은 너무 오래 전에 게시하고 있었고, 난 구글 검색을 통해 우연히 발견. HTML5는 텍스트의 범위를 대체하거나 setRangeText () 메소드를 포함 HTMLInputElement의 API를 제공 <텍스트 영역> 새로운 문자열 요소 :

    이 질문의 대답은 너무 오래 전에 게시하고 있었고, 난 구글 검색을 통해 우연히 발견. HTML5는 텍스트의 범위를 대체하거나 setRangeText () 메소드를 포함 HTMLInputElement의 API를 제공 <텍스트 영역> 새로운 문자열 요소 :

    element.setRangeText('abc');
    

    위는 ABC와 요소 내부 만든 선택을 대체 할 것이다. 또한 대체하는 입력 값의 일부를 지정할 수 있습니다 :

    element.setRangeText('abc', 3, 5);
    

    위는 ABC와 입력 값의 6 문자까지 4를 대체 할 것이다. 또한 4 매개 변수로 다음 문자열 중 하나를 제공하여 선택이 텍스트를 교체 한 후에 설정 방법을 지정할 수 있습니다 :

    브라우저 호환성

    setRangeText에 대한 MDN 페이지가 브라우저 호환성 데이터를 제공하지 않지만, 나는 그것이 기본적으로 IE 9 위의 모든 최신 브라우저입니다 HTMLInputElement.setSelectionRange ()와 같은 것 같아요, 에지 12 위.

from https://stackoverflow.com/questions/1064089/inserting-a-text-where-cursor-is-using-javascript-jquery by cc-by-sa and MIT license