टेक्स्टरेरा में कर्सर की स्थिति प्राप्त करना

मैं एक टेक्स्ट क्षेत्र में स्वत: पूर्ण करने के लिए प्रयास कर रहा हूं (http://www.pengoworks.com/workshop/jquery/autocomplete.htm के समान)।टेक्स्टरेरा में कर्सर की स्थिति प्राप्त करना

जो मैं करने की कोशिश कर रहा हूं वह यह है कि जब कोई उपयोगकर्ता वर्णों के एक विशिष्ट समूह में प्रवेश करता है (सम्मिलित कहें :) उन्हें संभावित चयन योग्य मैचों के साथ एक AJAX भरे हुए div मिलेगा।

नियमित टेक्स्ट बॉक्स में, यह निश्चित रूप से सरल है, लेकिन एक टेक्स्ट क्षेत्र में मुझे कर्सर के आधार पर स्क्रीन पर सही स्थान पर div को पॉप अप करने में सक्षम होना चाहिए।

कोई भी कोई दिशा प्रदान कर सकता है?

धन्यवाद, -M

स्रोत

2008-12-04 Anonymous

आप इसे सभी जानकारी (जैसे स्थिति) को तुम्हारी जरूरत है प्रकट करने के लिए की जांच) कैरट document.selection.createRange (का उपयोग कर प्राप्त कर सकते हैं, और उसके बाद। अधिक जानकारी के लिए those examples देखें।

स्रोत

2008-12-04 16:45:39

function getCursor(nBox){ 
    var cursorPos = 0; 
    if (document.selection){ 
     nBox.focus(); 
     var tmpRange = document.selection.createRange(); 
     tmpRange.moveStart('character',-nBox.value.length); 
     cursorPos = tmpRange.text.length; 
    } 
    else{ 
     if (nBox.selectionStart || nBox.selectionStart == '0'){ 
      cursorPos = nBox.selectionStart; 
     } 
    } 

    return cursorPos; 
} 

function detectLine(nBox,lines){ 
    var cursorPos = getCursor(nBox); 
    var z = 0; //Sum of characters in lines 
    var lineNumber = 1; 
    for (var i=1; i<=lines.length; i++){ 
     z = sumLines(i)+i; // +i because cursorPos is taking in account endcharacters of each line. 
     if (z >= cursorPos){ 
      lineNumber = i; 
      break; 
     } 
    } 

    return lineNumber; 

    function sumLines(arrayLevel){ 
     sumLine = 0; 
     for (var k=0; k<arrayLevel; k++){ 
      sumLine += lines[k].length; 
     } 
     return sumLine; 
    } 
} 



function detectWord(lineString, area, currentLine, linijeKoda){ 
    function sumWords(arrayLevel){ 
     var sumLine = 0; 
     for (var k=0; k<arrayLevel; k++){ 
      sumLine += words[k].length; 
     }  
     return sumLine; 
    } 


    var cursorPos = getCursor(area); 
    var sumOfPrevChars =0; 
    for (var i=1; i<currentLine; i++){ 
     sumOfPrevChars += linijeKoda[i].length; 
    } 

    var cursorLinePos = cursorPos - sumOfPrevChars; 

    var words = lineString.split(" "); 
    var word; 
    var y = 0; 


    for(var i=1; i<=words.length; i++){ 
     y = sumWords(i) + i; 
     if(y >= cursorLinePos){ 
      word = i; 
      break; 
     } 
    } 

    return word; 
} 

var area = document.getElementById("area"); 
var linijeKoda = area.value.split("\n"); 
var currentLine = detectLine(area,linijeKoda); 
var lineString = linijeKoda[currentLine-1]; 
var activeWord = detectWord(lineString, area, currentLine, linijeKoda); 
var words = lineString.split(" "); 
if(words.length > 1){ 
    var possibleString = words[activeWord-1]; 
} 
else{ 
    var possibleString = words[0]; 
}

यह करना होगा कि ... :)

स्रोत

2009-06-22 15:59:49 Popara

एक बदसूरत समाधान:

यानी के लिए

: उपयोग document.selection ...

एफएफ के लिए

: पाठ क्षेत्र के पीछे एक पूर्व का उपयोग , इसमें कर्सर से पहले टेक्स्ट पेस्ट करें, इसके बाद मार्कर एचटीएमएल तत्व डालें (कर्सरपॉस), और उस मार्कर तत्व

नोट्स के माध्यम से कर्सर स्थिति प्राप्त करें: | कोड बदसूरत है, इसके लिए खेद है पूर्व और textarea फ़ॉन्ट वही होना चाहिए | अस्पष्टता का उपयोग विज़ुअलाइज़ेशन के लिए किया जाता है वहाँ कोई स्वत: पूर्ण, बस एक कर्सर निम्नलिखित div यहाँ जाता है कि आसान नहीं है (यदि आप पाठ क्षेत्र के अंदर टाइप के रूप में) (संशोधित यह अपनी जरूरत के आधार पर)

<html> 
<style> 
pre.studentCodeColor{ 
    position:absolute; 
    margin:0; 
    padding:0; 
    border:1px solid blue; 
    z-index:2; 
} 
textarea.studentCode{ 
    position:relative; 
    margin:0; 
    padding:0; 
    border:1px solid silver;  
    z-index:3; 
    overflow:visible; 
    opacity:0.5; 
    filter:alpha(opacity=50); 
} 
</style> 

hello world<br/> 
how are you<br/> 
<pre class="studentCodeColor" id="preBehindMyTextarea"> 
</pre> 
<textarea id="myTextarea" class="studentCode" cols="100" rows="30" onkeyup="document.selection?ieTaKeyUp():taKeyUp();"> 
</textarea> 

<div 
    style="width:100px;height:60px;position:absolute;border:1px solid red;background-color:yellow" 
    id="autoCompleteSelector"> 
autocomplete contents 
</div> 

<script> 
var myTextarea = document.getElementById('myTextarea'); 
var preBehindMyTextarea = document.getElementById('preBehindMyTextarea'); 
var autoCompleteSelector = document.getElementById('autoCompleteSelector'); 

function ieTaKeyUp(){ 
    var r = document.selection.createRange(); 
    autoCompleteSelector.style.top = r.offsetTop; 
    autoCompleteSelector.style.left = r.offsetLeft; 
} 
function taKeyUp(){ 
    taSelectionStart = myTextarea.selectionStart; 
    preBehindMyTextarea.innerHTML = myTextarea.value.substr(0,taSelectionStart)+'<span id="cursorPos">'; 
    cp = document.getElementById('cursorPos'); 
    leftTop = findPos(cp); 

    autoCompleteSelector.style.top = leftTop[1]; 
    autoCompleteSelector.style.left = leftTop[0]; 
} 
function findPos(obj) { 
    var curleft = curtop = 0; 
    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
    } 
    return [curleft,curtop]; 
} 
//myTextarea.selectionStart 
</script> 
</html>

स्रोत

2009-08-06 11:26:01

एक पाठ क्षेत्र में एक स्वत: पूर्ण को लागू करने। मैंने एक jquery प्लगइन लागू किया जो ऐसा करता है, और मुझे यह समझने के लिए टेक्सारिया का एक क्लोन बनाना था जहां कर्सर टेक्स्टरेरा के अंदर स्थित है। यह काम कर रहा है, लेकिन यह सही नहीं है।

आप इसे यहां देख सकते हैं: http://www.amirharel.com/2011/03/07/implementing-autocomplete-jquery-plugin-for-textarea/

मुझे आशा है कि यह मदद करता है।

स्रोत

2011-03-09 10:44:18 Amir

टेक्स्टरेरा में कर्सर की स्थिति प्राप्त करना

उत्तर

संबंधित मुद्दे