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 相关文章推荐
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 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_intersect()函数使用代码
2009/01/14 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
apache php模块整合操作指南
2012/11/16 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
Python实现名片管理系统
2020/02/14 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
python可以用哪些数据库
2020/06/22 Python
Django中使用Celery的方法步骤
2020/12/07 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
创建精神文明单位实施方案
2014/03/08 职场文书
学习退步检讨书
2014/09/28 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
《颐和园》教学反思
2016/02/19 职场文书