Getting cursor position in a Textarea

Asked 4/12, 2008 at 16:34 Answered 9/3, 2011 at 10:44

I am trying to implement Autocomplete in a text area (similar to http://www.pengoworks.com/workshop/jquery/autocomplete.htm).

What I am trying to do is when a user enters a specific set of characters (say insert:) they will get an AJAX filled div with possible selectable matches.

In a regular text box, this is of course simple, but in a text area I need to be able to popup the div in the correct location on the screen based on the cursor.

Can anyone provide any direction?

Thanks, -M

Elliellicott answered 4/12, 2008 at 16:34 Comment(0)

You can get the caret using document.selection.createRange(), and then examining it to reveal all the information you need (such as position). See those examples for more details.

Modiste answered 4/12, 2008 at 16:45 Comment(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];
}

That would do it ... :)

Doublebreasted answered 22/6, 2009 at 15:59 Comment(0)

Implementing an autocomplete in a text area is not that easy. I implemented a jquery plugin that does that, and i had to create a clone of the texarea to guess where the cursor is positioned inside the textarea. Its working, but its not perfect.

You can check it out here: http://www.amirharel.com/2011/03/07/implementing-autocomplete-jquery-plugin-for-textarea/

I hope it helps.

Tonometer answered 9/3, 2011 at 10:44 Comment(0)

an ugly solution:

for ie: use document.selection...

for ff: use a pre behind textarea, paste text before cursor into it, put a marker html element after it (cursorPos), and get the cursor position via that marker element

Notes: | code is ugly, sorry for that | pre and textarea font must be the same | opacity is utilized for visualization | there is no autocomplete, just a cursor following div here (as you type inside textarea) (modify it based on your need)

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

Flint answered 6/8, 2009 at 11:26 Comment(0)

Recommended topics

Hot tags