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

[html]

 view plaincopy

1. var kingwolfofsky = {  
2.     /**  
3.     * 擷取輸入光标在頁面中的坐标  
4.     * @param        {HTMLElement}   輸入框元素          
5.     * @return       {Object}        傳回left和top,bottom  
6.     */  
7.     getInputPositon: function (elem) {  
8.         if (document.selection) {   //IE Support  
9.             elem.focus();  
10.             var Sel = document.selection.createRange();  
11.             return {  
12.                 left: Sel.boundingLeft,  
13.                 top: Sel.boundingTop,  
14.                 bottom: Sel.boundingTop + Sel.boundingHeight  
15.             };  
16.         } else {  
17.             var that = this;  
18.             var cloneDiv = '{$clone_div}', cloneLeft = '{$cloneLeft}', cloneFocus = '{$cloneFocus}', cloneRight = '{$cloneRight}';  
19.             var none = '<span style="white-space:pre-wrap;"> </span>';  
20.             var div = elem[cloneDiv] || document.createElement('div'), focus = elem[cloneFocus] || document.createElement('span');  
21.             var text = elem[cloneLeft] || document.createElement('span');  
22.             var offset = that._offset(elem), index = this._getFocus(elem), focusOffset = { left: 0, top: 0 };  
23.             if (!elem[cloneDiv]) {  
24.                 elem[cloneDiv] = div, elem[cloneFocus] = focus;  
25.                 elem[cloneLeft] = text;  
26.                 div.appendChild(text);  
27.                 div.appendChild(focus);  
28.                 document.body.appendChild(div);  
29.                 focus.innerHTML = '|';  
30.                 focus.style.cssText = 'display:inline-block;width:0px;overflow:hidden;z-index:-100;word-wrap:break-word;word-break:break-all;';  
31.                 div.className = this._cloneStyle(elem);  
32.                 div.style.cssText = 'visibility:hidden;display:inline-block;position:absolute;z-index:-100;word-wrap:break-word;word-break:break-all;overflow:hidden;';  
34.             div.style.left = this._offset(elem).left + "px";  
35.             div.style.top = this._offset(elem).top + "px";  
36.             var strTmp = elem.value.substring(0, index).replace(/</g, '<').replace(/>/g, '>').replace(/\n/g, '<br/>').replace(/\s/g, none);  
37.             text.innerHTML = strTmp;  
38.             focus.style.display = 'inline-block';  
39.             try { focusOffset = this._offset(focus); } catch (e) { };  
40.             focus.style.display = 'none';  
42.                 left: focusOffset.left,  
43.                 top: focusOffset.top,  
44.                 bottom: focusOffset.bottom  
46.         }  
47.     },  
48.     // 克隆元素樣式并傳回類  
49.     _cloneStyle: function (elem, cache) {  
50.         if (!cache && elem['${cloneName}']) return elem['${cloneName}'];  
51.         var className, name, rstyle = /^(number|string)$/;  
52.         var rname = /^(content|outline|outlineWidth)$/; //Opera: content; IE8:outline && outlineWidth  
53.         var cssText = [], sStyle = elem.style;  
54.         for (name in sStyle) {  
55.             if (!rname.test(name)) {  
56.                 val = this._getStyle(elem, name);  
57.                 if (val !== '' && rstyle.test(typeof val)) { // Firefox 4  
58.                     name = name.replace(/([A-Z])/g, "-$1").toLowerCase();  
59.                     cssText.push(name);  
60.                     cssText.push(':');  
61.                     cssText.push(val);  
62.                     cssText.push(';');  
63.                 };  
65.         };  
66.         cssText = cssText.join('');  
67.         elem['${cloneName}'] = className = 'clone' + (new Date).getTime();  
68.         this._addHeadStyle('.' + className + '{' + cssText + '}');  
69.         return className;  
71.     // 向頁頭插入樣式  
72.     _addHeadStyle: function (content) {  
73.         var style = this._style[document];  
74.         if (!style) {  
75.             style = this._style[document] = document.createElement('style');  
76.             document.getElementsByTagName('head')[0].appendChild(style);  
78.         style.styleSheet && (style.styleSheet.cssText += content) || style.appendChild(document.createTextNode(content));  
80.     _style: {},  
81.     // 擷取最終樣式  
82.     _getStyle: 'getComputedStyle' in window ? function (elem, name) {  
83.         return getComputedStyle(elem, null)[name];  
84.     } : function (elem, name) {  
85.         return elem.currentStyle[name];  
87.     // 擷取光标在文本框的位置  
88.     _getFocus: function (elem) {  
89.         var index = 0;  
90.         if (document.selection) {// IE Support  
93.             if (elem.nodeName === 'TEXTAREA') {//textarea  
94.                 var Sel2 = Sel.duplicate();  
95.                 Sel2.moveToElementText(elem);  
96.                 var index = -1;  
97.                 while (Sel2.inRange(Sel)) {  
98.                     Sel2.moveStart('character');  
99.                     index++;  
101.             }  
102.             else if (elem.nodeName === 'INPUT') {// input  
103.                 Sel.moveStart('character', -elem.value.length);  
104.                 index = Sel.text.length;  
107.         else if (elem.selectionStart || elem.selectionStart == '0') { // Firefox support  
108.             index = elem.selectionStart;  
110.         return (index);  
112.     // 擷取元素在頁面中位置  
113.     _offset: function (elem) {  
114.         var box = elem.getBoundingClientRect(), doc = elem.ownerDocument, body = doc.body, docElem = doc.documentElement;  
115.         var clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0;  
116.         var top = box.top + (self.pageYOffset || docElem.scrollTop) - clientTop, left = box.left + (self.pageXOffset || docElem.scrollLeft) - clientLeft;  
117.         return {  
118.             left: left,  
119.             top: top,  
120.             right: left + box.width,  
121.             bottom: top + box.height  
123.     }  
124. };  
125. function getPosition(ctrl) {  
126.     var p = kingwolfofsky.getInputPositon(ctrl);  
127.     document.getElementById('show').style.left = p.left + "px";  
128.     document.getElementById('show').style.top = p.bottom + "px";  
129. }