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

Posted 2022-07-20 坐标

篇首语：历史是一面镜子，它照亮现实，也照亮未来。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 js获得指定控件输入光标的坐标兼容IE等多种主流浏览器相关的知识，希望对你有一定的参考价值。

js获得指定控件输入光标的坐标兼容IE等多种主流浏览器 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

代码如下: 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 > </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;//同上 cha138/Article/program/Java/JSP/201311/20118