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 异常处理使用总结
Jun 21 Javascript
javascript 浏览器检测代码精简版
Mar 04 Javascript
JavaScript 格式字符串的应用
Mar 29 Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
vue源码解析之事件机制原理
Apr 21 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 项目的方法
2007/01/02 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
在Python中使用SQLite的简单教程
2015/04/29 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
python列表生成器迭代器实例解析
2019/12/19 Python
Python通过len函数返回对象长度
2020/10/22 Python
python3中布局背景颜色代码分析
2020/12/01 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
介绍一下Python中webbrowser的用法
2013/05/07 面试题
化学教师教学反思
2014/01/17 职场文书
初中科学教学反思
2014/01/21 职场文书
安全生产标语
2014/06/06 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
单位计划生育责任书
2015/05/09 职场文书
python如何进行基准测试
2021/04/26 Python
Python开发五子棋小游戏
2022/04/28 Python
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis