Caret positition/Selection wewnątrz DIV, Textbox, Textarea, itp.

Question

Czy istnieje całkowite rozwiązanie dla uzyskania pozycji i/lub wyboru karetki w każdej przeglądarce z różnych elementów. Poszukuję rozwiązania, które mogę wykonać tak, jak mGetCaretPosition (iControl), które zwróci pozycję daszka wewnątrz tego elementu.

Próbowałem wiele funkcji:

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

Wywołanie metody podobnej do document.selection.createRange(). Tekst nie zwraca pozycji karetki, ponieważ nie ma wyboru. Podczas ustawiania tRange.moveStart ('character', -X) X nie jest znaną wartością. Kiedy używasz tego wewnątrz div, a karetka jest w środku, bierze kod przed div.

Answer 1

Zbudowałem to dzisiaj. Jest to kombinacja odpowiedzi alex i innych wyników w google. Przetestowałem go w przeglądarkach IE9, Chrome, Opera, Safari i Firefox na PC, a także w HTC Sensation z Androidem z domyślną przeglądarką, Firefox, Chrome i Opera.

Tylko Opera na urządzeniu mobilnym miała pewne problemy.

Moje rozwiązanie:

// 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; 
    } 
}