DIV, Textbox, Textarea 등의 캐럿 (caret) 위치/선택

Question

다른 요소의 모든 브라우저에서 캐럿 위치 또는 선택 항목을 가져 오는 토탈 솔루션이 있습니까? 나는 마술사가 그것의 요소 안에 캐럿 위치를 반환 할 것인가로 mGetCaretPosition (iControl) 마녀처럼 실행할 수있는 해결책 마녀를 찾고있다.

• selection (window/document) [document=IE, window=Opera]
• getSelection (window/document) [document=Firefox, document=Chrome, document=Safari]
• selectionStart (input/textarea) [All]
• craeteRange (selection)
• createTextRange (selection)

:
는
는 나는 기능을 많이 시도

document.selection.createRange(). text와 같은 메서드를 호출하면 선택 영역이 없으므로 캐럿 위치가 반환되지 않습니다. tRange.moveStart ('character', -X)를 설정할 때 X는 알려진 값이 아닙니다. 이것을 div 안에 넣고 중간에 caret가 있으면 div 앞에 코드가 걸립니다.

Answer 1

오늘 빌드했습니다. 그것은 youre 응답 alex와 google 내의 다른 결과의 조합입니다. 필자는 IE9, Chrome, Opera, Safari, Firefox 및 PC의 HTC Sensation에서 기본 브라우저, Firefox, Chrome 및 Opera로 안드로이드를 테스트했습니다.

모바일 장치의 Opera에만 문제가있었습니다.

내 솔루션 :

// Control 
var BSControl = function(iControl) 
{ 
    // Variable 
    var tControl = (typeof iControl == 'string' ? document.getElementById(iControl) : iControl); 

    // Get Caret 
    this.mGetCaret = function() 
    { 
     // Resultaat aanmaken 
     var tResult = -1; 

     // SelectionStart 
     // *) Input & Textarea 
     if(tResult == -1 && (tControl.selectionStart || tControl.selectionStart == '0')) 
     { 
      tResult = tControl.selectionStart; 
     } 

     // ContentWindow.GetSelection 
     // *) IFrame 
     if(tResult == -1 && (tControl.contentWindow && tControl.contentWindow.getSelection)) 
     { 
      var tRange= tControl.contentWindow.getSelection().getRangeAt(0); 
      tResult = tRange.startOffset; 
     } 

     // GetSelection 
     // *) Div 
     if(tResult == -1 && (window.getSelection)) 
     { 
      var tRange= window.getSelection().getRangeAt(0); 
      tResult = tRange.startOffset; 
     } 

     // Resultaat teruggeven 
     return tResult; 
    } 

    // Set Caret 
    this.mSetCaret = function(iPosition) 
    { 
     // SelectionStart 
     // *) Input & Textarea 
     if(tControl.selectionStart || tControl.selectionStart == '0') 
     { 
      tControl.selectionStart = iPosition; 
      tControl.selectionEnd = iPosition; 
      return; 
     } 

     // ContentWindow.GetSelection 
     // *) IFrame 
     if(tControl.contentWindow && tControl.contentWindow.getSelection) 
     { 
      var tRange = tControl.contentDocument.createRange(); 
      tRange.setStart(tControl.contentDocument.body.firstChild, iPosition); 
      tRange.setEnd(tControl.contentDocument.body.firstChild, iPosition); 

      var tSelection = tControl.contentWindow.getSelection(); 
      tSelection.removeAllRanges(); 
      tSelection.addRange(tRange); 

      return; 
     } 

     // GetSelection 
     // *) Div 
     if(window.getSelection) 
     { 
      var tSelection = window.getSelection(); 
      var tRange= tSelection.getRangeAt(0); 

      tRange.setStart(tControl.firstChild, iPosition); 
      tRange.setEnd(tControl.firstChild, iPosition); 

      tSelection.removeAllRanges(); 
      tSelection.addRange(tRange); 

      return; 
     } 
    } 

    // Get Selection 
    this.mGetSelection = function() 
    { 
     // Resultaat aanmaken 
     var tResult = null; 

     // SelectionStart 
     // *) Input & Textarea 
     if(tResult == null && (tControl.selectionStart || tControl.selectionStart == '0')) 
     { 
      tResult = this.mGet().substring(tControl.selectionStart, tControl.selectionEnd); 
     } 

     // ContentWindow.GetSelection 
     // *) IFrame 
     if(tResult == null && (tControl.contentWindow && tControl.contentWindow.getSelection)) 
     { 
      var tSelection = tControl.contentWindow.getSelection() 
      tResult = tSelection.toString(); 
     } 

     // GetSelection 
     // *) Div 
     if(tResult == null && (window.getSelection)) 
     { 
      var tSelection = window.getSelection() 
      tResult = tSelection.toString(); 
     } 

     // Resultaat teruggeven 
     return tResult; 
    } 

    // Set Selection 
    this.mSetSelection = function(iFrom, iUntil) 
    { 
     // SelectionStart 
     // *) Input & Textarea 
     if(tControl.selectionStart || tControl.selectionStart == '0') 
     { 
      tControl.selectionStart = iFrom; 
      tControl.selectionEnd = iUntil; 
      return; 
     } 

     // ContentWindow.GetSelection 
     // *) IFrame 
     if(tControl.contentWindow && tControl.contentWindow.getSelection) 
     { 
      var tRange = tControl.contentDocument.createRange(); 
      tRange.setStart(tControl.contentDocument.body.firstChild, iFrom); 
      tRange.setEnd(tControl.contentDocument.body.firstChild, iUntil); 

      var tSelection = tControl.contentWindow.getSelection(); 
      tSelection.removeAllRanges(); 
      tSelection.addRange(tRange); 

      return; 
     } 

     // GetSelection 
     // *) Div 
     if(window.getSelection) 
     { 
      var tSelection = window.getSelection(); 
      var tRange= tSelection.getRangeAt(0); 

      tRange.setStart(tControl.firstChild, iFrom); 
      tRange.setEnd(tControl.firstChild, iUntil); 

      tSelection.removeAllRanges(); 
      tSelection.addRange(tRange); 

      return; 
     } 
    } 

    // Set 
    this.mSet = function(iValue) 
    { 
     // Afhankelijk van aanwezige property waarde instellen 
     if('value' in tControl) 
     { 
      tControl.value = iValue; 
     }else if('innerText' in tControl) 
     { 
      tControl.innerText = iValue; 
     }else if('textContent' in tControl) 
     { 
      tControl.textContent = iValue; 
     }else if('innerHTML' in tControl) 
     { 
      tControl.innerHTML = iValue; 
     } 
    } 

    // Get 
    this.mGet = function() 
    { 
     // Resultaat aanmaken 
     var tResult = null; 

     // Afhankelijk van aanwezige property waarde instellen 
     if('value' in tControl) 
     { 
      tResult = tControl.value; 
     }else if('innerText' in tControl) 
     { 
      tResult = tControl.innerText; 
     }else if('textContent' in tControl) 
     { 
      tResult = tControl.textContent; 
     }else if('innerHTML' in tControl) 
     { 
      tResult = tControl.innerHTML; 
     } 

     // Resultaat teruggeven 
     return tResult; 
    } 
}