[JQUERY] 텍스트 영역에 커서 위치 (문자 인덱스 아닌 X / Y 좌표)

텍스트 영역에 커서 위치 (문자 인덱스 아닌 X / Y 좌표)

해결법

1. ---

   1.아니 jQuery를, 그러나 다만 자바 스크립트 ...

   아니 jQuery를, 그러나 다만 자바 스크립트 ...

   var position = window.getSelection().getRangeAt(0).startOffset;
   

2. ---

   2.jQuery로 작업에 BojanG의 솔루션을 수정. 크롬, FF와 IE에서 테스트.

   jQuery로 작업에 BojanG의 솔루션을 수정. 크롬, FF와 IE에서 테스트.

   (function ($, undefined) {
       $.fn.getCursorPosition = function() {
           var el = $(this).get(0);
           var pos = 0;
           if('selectionStart' in el) {
               pos = el.selectionStart;
           } else if('selection' in document) {
               el.focus();
               var Sel = document.selection.createRange();
               var SelLength = document.selection.createRange().text.length;
               Sel.moveStart('character', -el.value.length);
               pos = Sel.text.length - SelLength;
           }
           return pos;
       }
   })(jQuery);
   

   기본적으로 텍스트 상자에 사용하려면 다음을 수행하십시오

   $("#myTextBoxSelector").getCursorPosition();
   

3. ---

   3.

   
   function caretPos(el)
   {
       var pos = 0;
       // IE Support
       if (document.selection) 
       {
           el.focus ();
           var Sel = document.selection.createRange();
           var SelLength = document.selection.createRange().text.length;
           Sel.moveStart ('character', -el.value.length);
           pos = Sel.text.length - SelLength;
       }
       // Firefox support
       else if (el.selectionStart || el.selectionStart == '0')
           pos = el.selectionStart;
   
       return pos;
   
   }
   

4. ---

   4.나는이 jQuery를 입력 플러그를 마스킹 및 캐럿 기능은 정말 유용하다고하여 몇 가지 작업을 수행했다. 나는 위의 플러그인에서이 코드를 뽑아했습니다 ..

   나는이 jQuery를 입력 플러그를 마스킹 및 캐럿 기능은 정말 유용하다고하여 몇 가지 작업을 수행했다. 나는 위의 플러그인에서이 코드를 뽑아했습니다 ..

   $.fn.caret = function (begin, end)
       {
           if (this.length == 0) return;
           if (typeof begin == 'number')
           {
               end = (typeof end == 'number') ? end : begin;
               return this.each(function ()
               {
                   if (this.setSelectionRange)
                   {
                       this.setSelectionRange(begin, end);
                   } else if (this.createTextRange)
                   {
                       var range = this.createTextRange();
                       range.collapse(true);
                       range.moveEnd('character', end);
                       range.moveStart('character', begin);
                       try { range.select(); } catch (ex) { }
                   }
               });
           } else
           {
               if (this[0].setSelectionRange)
               {
                   begin = this[0].selectionStart;
                   end = this[0].selectionEnd;
               } else if (document.selection && document.selection.createRange)
               {
                   var range = document.selection.createRange();
                   begin = 0 - range.duplicate().moveStart('character', -100000);
                   end = begin + range.text.length;
               }
               return { begin: begin, end: end };
           }
       }
   

   이 기능을 만든 후에는 다음과 같은 작업을 수행 할 수 있습니다. 다시 한번,이 함수는 입력 기능에서 jQuery를 위에서 언급 한 마스크 당겨졌다.

   $("#id").caret(); //get the begin/end caret position
   $("#id").caret().begin;
   $("#id").caret().end;
   $("#otherId").caret(5); //set the caret position by index
   $("#otherId").caret(1, 5); //select a range
   

5. ---

   5.JQuery와 함께 할 수있는 가장 쉬운 방법 :

   JQuery와 함께 할 수있는 가장 쉬운 방법 :

     var cursorPos= $("#txtarea").prop('selectionStart');
   

   내 프로젝트에 대한 간단한 빠른 링크 옵션 / 텍스트 편집기를 만들려면이 코드를 사용하고 있습니다.

6. ---

   6.이는 IE9, 파이어 폭스와 크롬도 작동합니다 :

   이는 IE9, 파이어 폭스와 크롬도 작동합니다 :

   (function ($, undefined) {
       $.fn.getCursorPosition = function() {
           var el = $(this).get(0);
           var pos = 0;
           if('selectionStart' in el) {
               pos = el.selectionStart;
           } else if('selection' in document) {
               el.focus();
               var Sel = document.selection.createRange();
               var SelLength = document.selection.createRange().text.length;
               Sel.moveStart('character', -el.value.length);
               pos = Sel.text.length - SelLength;
           }
           return pos;
       }
   })(jQuery);
   

   그리고 난 그 다음 라이언의 버전이 훨씬 더 깨끗한 생각

7. ---

   7.

   function doGetCaretPosition(ctrl) {
       var CaretPos = 0; // IE Support
       if (document.selection) {
           ctrl.focus();
           var Sel = document.selection.createRange();
           Sel.moveStart('character', -ctrl.value.length);
           CaretPos = Sel.text.length;
       }
       // Firefox support
       else if (ctrl.selectionStart || ctrl.selectionStart == '0')
           CaretPos = ctrl.selectionStart;
       return (CaretPos);
   }
   

from https://stackoverflow.com/questions/1891444/cursor-position-in-a-textarea-character-index-not-x-y-coordinates by cc-by-sa and MIT license