JavaScript获取文本框光标的像素位置

本文主要实现获取textarea和input光标的像素位置，即光标的offsetLeft与offsetTop。可实现如下效果：

首先说明一下，在网上搜到的很多代码是如何获取输入光标位置的如下代码是如何获取光标的的字符位置，如对于串“Hefunction _getFocus(elem) {
0;
elem.focus();
document.selection.createRange();
Sel.duplicate();
Sel2.moveToElementText(elem);
-1;
;
};
}
else Sel.text.length;
}
}
else Firefox support elem.selectionStart;
}
(document.selection) {
elem.focus();
document.selection.createRange();

而对于firefox之类的浏览器则通过模拟来实现，如下图所示。首先通过拷贝输入区域的样式到一个div层（clone层），然后在此clone层之中的text子层添加光标之前的字符，并在text子层之后添加focus层，focus层中包含字符“|”来模拟光标，进而通过获取focus层的偏移量即可获得文本光标的像素坐标位置。

具体实现代码如下：

{
/**
* 获取输入光标在页面中的坐标
* @param {HTMLElement} 输入框元素
* @return {Object} 返回left和top,bottom
(elem) {
elem.focus();
document.selection.createRange();
{
this;
;
;
);
);
};

;
;
;
return {
left: focusOffset.left,
top: focusOffset.top,
bottom: focusOffset.bottom
};
}
},

(elem, cache) {
];
;
elem.style;

sStyle) {
this._getStyle(elem, name);
'' Firefox 4 Date).getTime();
);
return className;
},

(content) {
this._style[document];
style.appendChild(document.createTextNode(content));
},
_style: {},

function (elem, name) {
(elem, name) {
return elem.currentStyle[name];
},

(elem) {
0;
elem.focus();
document.selection.createRange();
Sel.duplicate();
Sel2.moveToElementText(elem);
-1;
;
};
}
else Sel.text.length;
}
}
else elem.selectionStart;
}
return (index);
},

(elem) {
doc.documentElement;
0;
clientLeft;
getPosition(ctrl) {

测试页面如下：

function show(elem) {
kingwolfofsky.getInputPositon(elem);
;
}



/>