Try the function below:
Example on JSFiddle: http://jsfiddle.net/9ThVr/
var getCaretPixelPos = function ($node, offsetx, offsety){
offsetx = offsetx || 0;
offsety = offsety || 0;
var nodeLeft = 0,
nodeTop = 0;
if ($node){
nodeLeft = $node.offsetLeft;
nodeTop = $node.offsetTop;
}
var pos = {left: 0, top: 0};
if (document.selection){
var range = document.selection.createRange();
pos.left = range.offsetLeft + offsetx - nodeLeft + 'px';
pos.top = range.offsetTop + offsety - nodeTop + 'px';
}else if (window.getSelection){
var sel = window.getSelection();
var range = sel.getRangeAt(0).cloneRange();
try{
range.setStart(range.startContainer, range.startOffset-1);
}catch(e){}
var rect = range.getBoundingClientRect();
if (range.endOffset == 0 || range.toString() === ''){
// first char of line
if (range.startContainer == $node){
// empty div
if (range.endOffset == 0){
pos.top = '0px';
pos.left = '0px';
}else{
// firefox need this
var range2 = range.cloneRange();
range2.setStart(range2.startContainer, 0);
var rect2 = range2.getBoundingClientRect();
pos.left = rect2.left + offsetx - nodeLeft + 'px';
pos.top = rect2.top + rect2.height + offsety - nodeTop + 'px';
}
}else{
pos.top = range.startContainer.offsetTop+'px';
pos.left = range.startContainer.offsetLeft+'px';
}
}else{
pos.left = rect.left + rect.width + offsetx - nodeLeft + 'px';
pos.top = rect.top + offsety - nodeTop + 'px';
}
}
return pos;
};
the following function might help. It will give you the start and end selected characters from the beginning of the textarea. If there is no selection, it will give you the char position of the caret:
function getInputSelection(el) {
var start = 0, end = 0, normalizedValue, range,
textInputRange, len, endRange;
if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
start = el.selectionStart;
end = el.selectionEnd;
} else {
range = document.selection.createRange();
if (range && range.parentElement() == el) {
len = el.value.length;
normalizedValue = el.value.replace(/\r\n/g, "\n");
// Create a working TextRange that lives only in the input
textInputRange = el.createTextRange();
textInputRange.moveToBookmark(range.getBookmark());
// Check if the start and end of the selection are at the very end
// of the input, since moveStart/moveEnd doesn't return what we want
// in those cases
endRange = el.createTextRange();
endRange.collapse(false);
if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
start = end = len;
} else {
start = -textInputRange.moveStart("character", -len);
start += normalizedValue.slice(0, start).split("\n").length - 1;
if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
end = len;
} else {
end = -textInputRange.moveEnd("character", -len);
end += normalizedValue.slice(0, end).split("\n").length - 1;
}
}
}
}
return {
start: start,
end: end
};
}
use example:
var selection = getInputSelection(textarea);
var start = selection.start;
var end = selection.end;