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


Posted in Javascript onMay 21, 2013

直接上代码

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: 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"; 
var strTmp = 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}']) return elem['${cloneName}']; 
var className, name, rstyle = /^(number|string)$/; 
var rname = /^(content|outline|outlineWidth)$/; //Opera: content; IE8: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 4 
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' + (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')[0].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 = 0; 
if (document.selection) {// IE Support 
elem.focus(); 
var Sel = document.selection.createRange(); 
if (elem.nodeName === 'TEXTAREA') {//textarea 
var Sel2 = Sel.duplicate(); 
Sel2.moveToElementText(elem); 
var index = -1; 
while (Sel2.inRange(Sel)) { 
Sel2.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 == '0') { // 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 || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0; 
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;//同上
Javascript 相关文章推荐
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
Js实现自定义右键行为
Mar 26 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
vue 项目常用加载器及配置详解
Jan 22 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
深入理解javaScript中的事件驱动
May 21 #Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 #Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 #Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 #Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 #Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 #Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 #Javascript
You might like
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
深入PHP数据加密详解
2013/06/18 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
浅析Python编写函数装饰器
2016/03/18 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
python多进程控制学习小结
2018/10/31 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
初中生物教学反思
2014/01/10 职场文书
厨房管理计划书
2014/04/27 职场文书
批评与自我批评范文
2014/10/15 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers