提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

JSChrome输入浏览器 指定 获得 控件 兼容
2023-06-13 09:14:54 时间
直接上代码
复制代码代码如下:

varkingwolfofsky={
/**
*获取输入光标在页面中的坐标
*@param{HTMLElement}输入框元素
*@return{Object}返回left和top,bottom
*/
getInputPositon:function(elem){
if(document.selection){//IESupport
elem.focus();
varSel=document.selection.createRange();
return{
left:Sel.boundingLeft,
top:Sel.boundingTop,
bottom:Sel.boundingTop+Sel.boundingHeight
};
}else{
varthat=this;
varcloneDiv="{$clone_div}",cloneLeft="{$cloneLeft}",cloneFocus="{$cloneFocus}",cloneRight="{$cloneRight}";
varnone="<spanstyle="white-space:pre-wrap;"></span>";
vardiv=elem[cloneDiv]||document.createElement("div"),focus=elem[cloneFocus]||document.createElement("span");
vartext=elem[cloneLeft]||document.createElement("span");
varoffset=that._offset(elem),index=this._getFocus(elem),focusOffset={left:0,top:0};
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:0px;overflow:hidden;z-index:-100;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:-100;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";
varstrTmp=elem.value.substring(0,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}"])returnelem["${cloneName}"];
varclassName,name,rstyle=/^(number|string)$/;
varrname=/^(content|outline|outlineWidth)$/;//Opera:content;IE8:outline&&outlineWidth
varcssText=[],sStyle=elem.style;
for(nameinsStyle){
if(!rname.test(name)){
val=this._getStyle(elem,name);
if(val!==""&&rstyle.test(typeofval)){//Firefox4
name=name.replace(/([A-Z])/g,"-$1").toLowerCase();
cssText.push(name);
cssText.push(":");
cssText.push(val);
cssText.push(";");
};
};
};
cssText=cssText.join("");
elem["${cloneName}"]=className="clone"+(newDate).getTime();
this._addHeadStyle("."+className+"{"+cssText+"}");
returnclassName;
},
//向页头插入样式
_addHeadStyle:function(content){
varstyle=this._style[document];
if(!style){
style=this._style[document]=document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(style);
};
style.styleSheet&&(style.styleSheet.cssText+=content)||style.appendChild(document.createTextNode(content));
},
_style:{},
//获取最终样式
_getStyle:"getComputedStyle"inwindow?function(elem,name){
returngetComputedStyle(elem,null)[name];
}:function(elem,name){
returnelem.currentStyle[name];
},
//获取光标在文本框的位置
_getFocus:function(elem){
varindex=0;
if(document.selection){//IESupport
elem.focus();
varSel=document.selection.createRange();
if(elem.nodeName==="TEXTAREA"){//textarea
varSel2=Sel.duplicate();
Sel2.moveToElementText(elem);
varindex=-1;
while(Sel2.inRange(Sel)){
Sel2.moveStart("character");
index++;
};
}
elseif(elem.nodeName==="INPUT"){//input
Sel.moveStart("character",-elem.value.length);
index=Sel.text.length;
}
}
elseif(elem.selectionStart||elem.selectionStart=="0"){//Firefoxsupport
index=elem.selectionStart;
}
return(index);
},
//获取元素在页面中位置
_offset:function(elem){
varbox=elem.getBoundingClientRect(),doc=elem.ownerDocument,body=doc.body,docElem=doc.documentElement;
varclientTop=docElem.clientTop||body.clientTop||0,clientLeft=docElem.clientLeft||body.clientLeft||0;
vartop=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
};
}
};
functiongetPosition(ctrl){
varp=kingwolfofsky.getInputPositon(ctrl);
document.getElementById("show").style.left=p.left+"px";
document.getElementById("show").style.top=p.bottom+"px";
}

----------------------------------------------------------------------------------------------------------------------------------------
调用代码：
复制代码代码如下:

varelem=document.getElementById(控件ID);
varp=kingwolfofsky.getInputPositon(elem);
p.left;//获得指定位置坐标
p.top;//同上
p.bottom;//同上

相关文章