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 相关文章推荐
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
类和原型的设计模式之复制与委托差异
Jul 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
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
JSX在render函数中的应用详解
2019/09/04 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
python基础教程之基本内置数据类型介绍
2014/02/20 Python
python中的__slots__使用示例
2015/02/26 Python
python比较两个列表是否相等的方法
2015/07/28 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
深入了解Python在HDA中的应用
2019/09/05 Python
Python3列表List入门知识附实例
2020/02/09 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
python ssh 执行shell命令的示例
2020/09/29 Python
Python排序函数的使用方法详解
2020/12/11 Python
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
物流创业计划书
2014/02/01 职场文书
入党申请自荐书范文
2014/02/11 职场文书
外国人聘用意向书
2014/04/01 职场文书
二年级评语大全
2014/04/23 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
绿色校园广播稿
2014/10/13 职场文书
先进典型事迹材料
2014/12/29 职场文书
教代会闭幕词
2015/01/28 职场文书