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 ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
Javascript writable特性介绍
Feb 27 Javascript
JavaScript中return false的用法
Mar 12 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 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 实现explort() 功能的详解
2013/06/20 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
javascript第一课
2007/02/27 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
python数字类型math库原理解析
2020/03/02 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
在线课程:Skillshare
2019/04/02 全球购物
质检部岗位职责
2013/11/11 职场文书
上课睡觉检讨书
2014/01/28 职场文书
银行优秀员工事迹
2014/02/06 职场文书
课程改革实施方案
2014/03/16 职场文书
冬季安全检查方案
2014/05/23 职场文书
十佳青年事迹材料
2014/08/21 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
python实现高效的遗传算法
2021/04/07 Python
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
Java设计模式之享元模式示例详解
2022/03/03 Java/Android
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫