javascript

位置:IT落伍者 >> javascript >> 浏览文章

js获得指定控件输入光标的坐标兼容IE等多种主流浏览器


发布日期:2019年03月31日
 
js获得指定控件输入光标的坐标兼容IE等多种主流浏览器
代码如下:
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;//同上               

上一篇:jquery的相对父元素和相对文档定位示例代码

下一篇:解析Jquery取得iframe中元素的几种方法