2012-10-18 27 views
9

क्या विभिन्न तत्वों से प्रत्येक ब्राउज़र के अंदर एक कैरेट स्थिति और/या चयन प्राप्त करने का कुल समाधान है। मैं एक समाधान चुड़ैल की तलाश में हूं जिसे मैं 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() जैसे किसी विधि को कॉल करना। पाठ एक कैरेट स्थिति वापस नहीं करता है क्योंकि इसमें कोई चयन नहीं है। TRange.moveStart ('character', -X) सेट करते समय एक्स ज्ञात मान नहीं है। जब आप इसे एक div के अंदर उपयोग करते हैं और कैरेट मध्य में होता है तो यह div से पहले कोड लेता है।

+1

चेक बाहर [Rangy] (http://code.google.com/p/rangy/) –

+0

कैरट स्थिति किस तरह आप के बाद कर रहे हैं? क्या आप 'संतुष्ट' तत्वों और/या textareas/टेक्स्ट इनपुट के लिए समाधान चाहते हैं? कैरेट की स्थिति को कैसे प्रदर्शित किया जाना चाहिए? –

उत्तर

3

मैंने आज इसे बनाया है। यह आपके प्रतिक्रिया प्रतिक्रिया एलेक्स और अन्य परिणामों के साथ Google के अंदर है। मैंने पीसी पर ब्राउज़र IE9, क्रोम, ओपेरा, सफारी और फ़ायरफ़ॉक्स के अंदर और डिफ़ॉल्ट ब्राउज़र, फ़ायरफ़ॉक्स, क्रोम और ओपेरा के साथ एंड्रॉइड के साथ एक एचटीसी सेंसेशन पर इसका परीक्षण किया है।

केवल मोबाइल डिवाइस पर ओपेरा में कुछ परेशानीएं थीं।

मेरे समाधान:

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