代碼如下:
var kingwolfofsky = {
/**
* 獲取輸入光標在頁面中的坐標
* @param {HTMLElement} 輸入框元素
* @return {Object} 返回left和top
bottom
*/
getInputPositon: function (elem) {
if (document
selection) { //IE Support
elem
focus();
var Sel = document
selection
createRange();
return {
left: Sel
boundingLeft
top: Sel
boundingTop
bottom: Sel
boundingTop + Sel
boundingHeight
};
} else {
var that = this;
var cloneDiv =
{$clone_div}
cloneLeft =
{$cloneLeft}
cloneFocus =
{$cloneFocus}
cloneRight =
{$cloneRight}
;
var none =
<span style="white
space:pre
wrap;"> </span>
;
var div = elem[cloneDiv] || document
createElement(
div
)
focus = elem[cloneFocus] || document
createElement(
span
);
var text = elem[cloneLeft] || document
createElement(
span
);
var offset = that
_offset(elem)
index = this
_getFocus(elem)
focusOffset = { left:
top:
};
if (!elem[cloneDiv]) {
elem[cloneDiv] = div
elem[cloneFocus] = focus;
elem[cloneLeft] = text;
div
appendChild(text);
div
appendChild(focus);
document
body
appendChild(div);
focus
innerHTML =
|
;
focus
style
cssText =
display:inline
block;width:
px;overflow:hidden;z
index:
;word
wrap:break
word;word
break:break
all;
;
div
className = this
_cloneStyle(elem);
div
style
cssText =
visibility:hidden;display:inline
block;position:absolute;z
index:
;word
wrap:break
word;word
break:break
all;overflow:hidden;
;
};
div
style
left = this
_offset(elem)
left + "px";
div
style
top = this
_offset(elem)
top + "px";
var strTmp = elem
value
substring(
index)
replace(/</g
<
)
replace(/>/g
>
)
replace(/n/g
<br/>
)
replace(/s/g
none);
text
innerHTML = strTmp;
focus
style
display =
inline
block
;
try { focusOffset = this
_offset(focus); } catch (e) { };
focus
style
display =
none
;
return {
left: focusOffset
left
top: focusOffset
top
bottom: focusOffset
bottom
};
}
}
// 克隆元素樣式並返回類
_cloneStyle: function (elem
cache) {
if (!cache && elem[
${cloneName}
]) return elem[
${cloneName}
];
var className
name
rstyle = /^(number|string)$/;
var rname = /^(content|outline|outlineWidth)$/; //Opera: content; IE
:outline && outlineWidth
var cssText = []
sStyle = elem
style;
for (name in sStyle) {
if (!rname
test(name)) {
val = this
_getStyle(elem
name);
if (val !==
&& rstyle
test(typeof val)) { // Firefox
name = name
replace(/([A
Z])/g
"
$
")
toLowerCase();
cssText
push(name);
cssText
push(
:
);
cssText
push(val);
cssText
push(
;
);
};
};
};
cssText = cssText
join(
);
elem[
${cloneName}
] = className =
clone
+ (new Date)
getTime();
this
_addHeadStyle(
+ className +
{
+ cssText +
}
);
return className;
}
// 向頁頭插入樣式
_addHeadStyle: function (content) {
var style = this
_style[document];
if (!style) {
style = this
_style[document] = document
createElement(
style
);
document
getElementsByTagName(
head
)[
]
appendChild(style);
};
style
styleSheet && (style
styleSheet
cssText += content) || style
appendChild(document
createTextNode(content));
}
_style: {}
// 獲取最終樣式
_getStyle:
getComputedStyle
in window ? function (elem
name) {
return getComputedStyle(elem
null)[name];
} : function (elem
name) {
return elem
currentStyle[name];
}
// 獲取光標在文本框的位置
_getFocus: function (elem) {
var index =
;
if (document
selection) {// IE Support
elem
focus();
var Sel = document
selection
createRange();
if (elem
nodeName ===
TEXTAREA
) {//textarea
var Sel
= Sel
duplicate();
Sel
moveToElementText(elem);
var index =
;
while (Sel
inRange(Sel)) {
Sel
moveStart(
character
);
index++;
};
}
else if (elem
nodeName ===
INPUT
) {// input
Sel
moveStart(
character
elem
value
length);
index = Sel
text
length;
}
}
else if (elem
selectionStart || elem
selectionStart ==
) { // Firefox support
index = elem
selectionStart;
}
return (index);
}
// 獲取元素在頁面中位置
_offset: function (elem) {
var box = elem
getBoundingClientRect()
doc = elem
ownerDocument
body = doc
body
docElem = doc
documentElement;
var clientTop = docElem
clientTop || body
clientTop ||
clientLeft = docElem
clientLeft || body
clientLeft ||
;
var top = box
top + (self
pageYOffset || docElem
scrollTop)
clientTop
left = box
left + (self
pageXOffset || docElem
scrollLeft)
clientLeft;
return {
left: left
top: top
right: left + box
width
bottom: top + box
height
};
}
};
function getPosition(ctrl) {
var p = kingwolfofsky
getInputPositon(ctrl);
document
getElementById(
show
)
style
left = p
left + "px";
document
getElementById(
show
)
style
top = p
bottom + "px";
}
調用代碼
復制代碼 代碼如下:
var elem = document
getElementById(控件ID);
var p = kingwolfofsky
getInputPositon(elem);
p
left;//獲得指定位置坐標
p
top;//同上
p
bottom;//同上
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20118.html