Xác định dấu mũ/Lựa chọn bên trong DIV, Hộp văn bản, Văn bản, v.v.

Question

Có giải pháp tổng thể để nhận vị trí và/hoặc lựa chọn dấu mũ bên trong mọi trình duyệt từ các thành phần khác nhau hay không. Tôi đang tìm kiếm một phù thủy giải pháp tôi có thể thực hiện như phù thủy mGetCaretPosition (iControl) sẽ trả về vị trí dấu mũ bên trong phần tử của nó.

Tôi đã cố gắng rất nhiều chức năng:

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

Gọi một phương thức như document.selection.createRange(). Văn bản không trả lại vị trí dấu nháy bởi vì nó không có lựa chọn. Khi thiết lập tRange.moveStart ('character', -X) X không phải là một giá trị đã biết. Khi bạn sử dụng điều này bên trong một div và dấu mũ ở giữa nó lấy mã trước div.

Answer 1

Tôi đã tạo phiên bản này ngay hôm nay. Đó là một sự kết hợp của bạn phản ứng alex và al các kết quả khác bên trong google. Tôi đã thử nghiệm nó bên trong các trình duyệt IE9, Chrome, Opera, Safari và Firefox trên PC và cũng trên HTC Sensation với Android với trình duyệt mặc định, Firefox, Chrome và Opera.

Chỉ Opera trên thiết bị di động mới có một số rắc rối.

Giải pháp của tôi:

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