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 16 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 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
一个程序下载的管理程序(二)
2006/10/09 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
vue ssr 指南详读
2018/06/29 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
Python函数中的可变长参数详解
2019/09/12 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
小班下学期评语
2014/05/04 职场文书
留守儿童工作方案
2014/06/02 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
python中 Flask Web 表单的使用方法
2022/05/20 Python