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 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
复制js对象方法(详解)
Jul 08 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
jQuery事件对象总结
Oct 17 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
uni-app之APP和小程序微信授权方法
May 09 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 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时间不正确的解决方法
2008/04/09 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
jQuery 操作option的实现代码
2011/03/03 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
nodejs教程之入门
2014/11/21 NodeJs
表单验证正则表达式实例代码详解
2015/11/09 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
Python实现基于权重的随机数2种方法
2015/04/28 Python
详解Python Socket网络编程
2016/01/05 Python
python实现红包裂变算法
2016/02/16 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
Python中常见的数制转换有哪些
2020/05/27 Python
python属于解释语言吗
2020/06/11 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
《美丽的田园》教学反思
2014/03/01 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python