1. Zuhause
  2. Frage und Antwort
  3. Cursor-Position in einem Textfeld eingeben

Cursor-Position in einem Textfeld eingeben

2008-12-04 7 views
8

Ich versuche, Autocomplete in einem Textbereich zu implementieren (ähnlich wie http://www.pengoworks.com/workshop/jquery/autocomplete.htm).Cursor-Position in einem Textfeld eingeben

Was ich versuche zu tun ist, wenn ein Benutzer einen bestimmten Satz von Zeichen eingibt (sagen wir einfügen :) sie erhalten ein AJAX gefüllt div mit möglichen auswählbaren Übereinstimmungen.

In einem normalen Textfeld, das ist natürlich einfach, aber in einem Textbereich muss ich in der Lage sein, das div an der richtigen Stelle auf dem Bildschirm basierend auf dem Cursor zu öffnen.

Kann jemand irgendeine Richtung geben?

Danke, -M

Quelle

2008-12-04 Anonymous

Antwort

4

Sie den Cursor() mit document.selection.createRange bekommen, und dann alle Informationen zu offenbaren untersuchen Sie (wie zB Position) benötigen. Weitere Informationen finden Sie unter thoseexamples.

Quelle

2008-12-04 16:45:39

0 
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]; 
}

Das würde es tun ... :)

Quelle

2009-06-22 15:59:49 Popara

0

eine hässliche Lösung:

für das heißt: Verwendung document.selection ...

für ff: eine Pre hinter TextArea- verwenden , fügen Sie einen Text vor dem Cursor ein, setzen Sie ein marker html Element dahinter (cursorPos), und erhalten Sie die Cursorposition über dieses Markerelement

Hinweise: | Code ist hässlich, Entschuldigung dafür | pre und textarea font müssen gleich sein | Opazität wird zur Visualisierung verwendet gibt es keine Autovervollständigung, nur ein Cursor hier folgende div (wie Sie in Textfeld eingeben) (es auf Ihrem Bedarf modify basiert)

<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>

Quelle

2009-08-06 11:26:01

Verwandte Themen

 Verwandte Themen