熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

js獲得指定控件輸入光標的坐標兼容IE等多種主流浏覽器

2013-11-15 12:01:56  來源: JSP教程 
 代碼如下:
var kingwolfofsky = {
/**
* 獲取輸入光標在頁面中的坐標
* @param {HTMLElement} 輸入框元素
* @return {Object} 返回left和topbottom
*/
getInputPositon: function (elem) {
if (documentselection) { //IE Support
elemfocus();
var Sel = documentselectioncreateRange();
return {
left: SelboundingLeft
top: SelboundingTop
bottom: SelboundingTop + SelboundingHeight
};
} else {
var that = this;
var cloneDiv = {$clone_div} cloneLeft = {$cloneLeft} cloneFocus = {$cloneFocus} cloneRight = {$cloneRight};
var none = <span style="whitespace:prewrap;"> </span>;
var div = elem[cloneDiv] || documentcreateElement(div) focus = elem[cloneFocus] || documentcreateElement(span);
var text = elem[cloneLeft] || documentcreateElement(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;
divappendChild(text);
divappendChild(focus);
documentbodyappendChild(div);
focusinnerHTML = |;
focusstylecssText = display:inlineblock;width:px;overflow:hidden;zindex:;wordwrap:breakword;wordbreak:breakall;;
divclassName = this_cloneStyle(elem);
divstylecssText = visibility:hidden;display:inlineblock;position:absolute;zindex:;wordwrap:breakword;wordbreak:breakall;overflow:hidden;;
};
divstyleleft = this_offset(elem)left + "px";
divstyletop = this_offset(elem)top + "px";
var strTmp = elemvaluesubstring( index)replace(/</g <)replace(/>/g >)replace(/n/g <br/>)replace(/s/g none);
textinnerHTML = strTmp;
focusstyledisplay = inlineblock;
try { focusOffset = this_offset(focus); } catch (e) { };
focusstyledisplay = none;
return {
left: focusOffsetleft
top: focusOffsettop
bottom: focusOffsetbottom
};
}
}
// 克隆元素樣式並返回類
_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 = elemstyle;
for (name in sStyle) {
if (!rnametest(name)) {
val = this_getStyle(elem name);
if (val !== && rstyletest(typeof val)) { // Firefox
name = namereplace(/([AZ])/g "$")toLowerCase();
cssTextpush(name);
cssTextpush(:);
cssTextpush(val);
cssTextpush(;);
};
};
};
cssText = cssTextjoin();
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] = documentcreateElement(style);
documentgetElementsByTagName(head)[]appendChild(style);
};
stylestyleSheet && (stylestyleSheetcssText += content) || styleappendChild(documentcreateTextNode(content));
}
_style: {}
// 獲取最終樣式
_getStyle: getComputedStyle in window ? function (elem name) {
return getComputedStyle(elem null)[name];
} : function (elem name) {
return elemcurrentStyle[name];
}
// 獲取光標在文本框的位置
_getFocus: function (elem) {
var index = ;
if (documentselection) {// IE Support
elemfocus();
var Sel = documentselectioncreateRange();
if (elemnodeName === TEXTAREA) {//textarea
var Sel = Selduplicate();
SelmoveToElementText(elem);
var index = ;
while (SelinRange(Sel)) {
SelmoveStart(character);
index++;
};
}
else if (elemnodeName === INPUT) {// input
SelmoveStart(character elemvaluelength);
index = Seltextlength;
}
}
else if (elemselectionStart || elemselectionStart == ) { // Firefox support
index = elemselectionStart;
}
return (index);
}
// 獲取元素在頁面中位置
_offset: function (elem) {
var box = elemgetBoundingClientRect() doc = elemownerDocument body = docbody docElem = docdocumentElement;
var clientTop = docElemclientTop || bodyclientTop || clientLeft = docElemclientLeft || bodyclientLeft || ;
var top = boxtop + (selfpageYOffset || docElemscrollTop) clientTop left = boxleft + (selfpageXOffset || docElemscrollLeft) clientLeft;
return {
left: left
top: top
right: left + boxwidth
bottom: top + boxheight
};
}
};
function getPosition(ctrl) {
var p = kingwolfofskygetInputPositon(ctrl);
documentgetElementById(show)styleleft = pleft + "px";
documentgetElementById(show)styletop = pbottom + "px";
}

  

調用代碼

復制代碼 代碼如下:
var elem = documentgetElementById(控件ID);
var p = kingwolfofskygetInputPositon(elem);
pleft;//獲得指定位置坐標
ptop;//同上
pbottom;//同上 
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20118.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.