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 相关文章推荐
newxtree.js代码
Mar 13 Javascript
csdn 博客的css样式 v3
Feb 24 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
深入理解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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
PHP服务器页面间跳转实现方法
2012/08/02 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
Js注册协议倒计时的小例子
2013/06/24 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
iview实现图片上传功能
2020/06/29 Javascript
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
python:接口间数据传递与调用方法
2018/12/17 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
2015年招生工作总结
2015/05/04 职场文书
新学期开学标语2015
2015/07/16 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android