首页 web前端 js教程 js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器_javascript技巧

js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器_javascript技巧

May 16, 2016 pm 05:33 PM
光标 坐标

直接上代码
复制代码 代码如下:

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 = ' ';
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(/\n/g, '
').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;//同上
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

打开或关闭 Easy T光标在 Windows 11 上的显示器之间移动 打开或关闭 Easy T光标在 Windows 11 上的显示器之间移动 Sep 30, 2023 pm 02:49 PM

通常,当使用双显示器设置时,会出现如何无缝地让光标从一个显示器移动到另一个显示器的问题。当您的鼠标光标在没有您控制的情况下从一个显示器移动到另一个显示器时,这可能会令人沮丧。如果Windows默认情况下允许您轻松地从一个显示器切换到另一个显示器,那不是很好吗?幸运的是,Windows11具有一个功能可以做到这一点,并且不需要很多技术知识来执行它。缓和光标在显示器之间的移动有什么作用?此功能有助于防止将鼠标从一台显示器移动到另一台显示器时光标漂移。默认情况下,该选项处于禁用状态。如果将其打开,鼠标

解决win7开机只出现黑屏并有光标问题的方法 解决win7开机只出现黑屏并有光标问题的方法 Dec 30, 2023 pm 10:25 PM

windows7系统目前已经停止了更新,因此如果出现问题只能自己解决了。像下图这种开机之后一个光标黑屏的问题,就有很多种情况,需要一个个进行排查,如果不想花时间排查也可以直接重装系统。win7开机只有一个光标黑屏怎么办第一种解决方法:重启电脑,重启后立即长按键盘“F8”按键。然后在高级系统菜单中选择“最后一次正确的配置”。第二种解决方法:按下快捷键“CTRL+SHIFT+ESC”,看是否能够调出任务管理器,能的话右键结束进程中的Explorer.exe然后新建运行Explorer.exe尝试是否

如何设置Debian 11 Xfce终端的光标颜色? 如何设置Debian 11 Xfce终端的光标颜色? Jan 03, 2024 pm 02:36 PM

Xfce是什么?Xfce是一个自由软件,运行在类Unix操作系统(如Linux、FreeBSD和Solaris)上,提供轻量级桌面环境。Debian11Xfce终端如何调光标颜色?随小编一起看一下具体操作吧。单击【编辑】-【首选项】。切换到【颜色】选项卡。勾选自定义【光标颜色】,单击右侧颜色选择按钮。打开调色板后,单击选择要设置的光标颜色即可。

点击input框没有光标怎么办 点击input框没有光标怎么办 Nov 24, 2023 am 09:44 AM

点击input框没有光标的解决办法:1、确认输入框焦点;2、清除浏览器缓存;3、更新浏览器;4、使用JavaScript;​5、检查硬件设备;6、检查输入框属性;7、调试JavaScript代码;8、检查页面其他元素;9、考虑浏览器兼容性。

Win10红警黑屏只有看到电脑鼠标怎么解决Win10红警打开黑屏仅有光标该怎么办 Win10红警黑屏只有看到电脑鼠标怎么解决Win10红警打开黑屏仅有光标该怎么办 Jul 08, 2023 pm 06:49 PM

红警是一款传统的策略类游戏,近期有客户说他在玩红警是发生了黑屏的状况,但显示屏上只有见到电脑鼠标,仅有光标在的会也没法继续玩该软件了,那麼Win10红警打开黑屏仅有光标怎么办呢,下边小编给大伙儿共享Win10红警黑屏只有看到电脑鼠标的解决方案。Win10红警黑屏只有看到电脑鼠标怎么解决?1、在文件夹名称内寻找如下图所示的文档。2、打开快捷方式图标,再加上“-win”标识符。3、鼠标点击选定如下图所示文档,挑选“用文本文档打开”。4、依照下面的图所显示修改分辨率。

linux vi 不显示光标怎么办 linux vi 不显示光标怎么办 Mar 22, 2023 am 09:39 AM

linux vi不显示光标的解决办法:1、登录linux系统,进入终端;2、通过执行“echo -e "\033[?25h"”方法显示光标即可。

能使小键盘区在编辑功能和光标控制之间转换的按键是什么 能使小键盘区在编辑功能和光标控制之间转换的按键是什么 Jul 26, 2021 pm 02:44 PM

能使小键盘区在编辑功能和光标控制之间转换的按键是NumLock;Numlock就是指锁住数字,如果在键盘上取消Numlock键,那么就无法使用小键盘上面的数字。

CentOS安装Piwik详解及解决CentOS安装后只有一个光标的问题 CentOS安装Piwik详解及解决CentOS安装后只有一个光标的问题 Feb 11, 2024 pm 07:36 PM

在Linux操作系统中,CentOS是一种基于RedHatEnterpriseLinux(RHEL)源代码免费重编译的Linux发行版,它被广泛应用于服务器环境中,因其稳定性和安全性而受到用户的喜爱,Piwik是一款开源的网站分析工具,可用于跟踪和分析网站的访问数据,本文将详细介绍如何在CentOS上安装Piwik,并解决在安装后只有一个光标的问题。安装Piwik1.确保您的CentOS系统已经安装了Apache、MySQL和PHP,可以使用以下命令进行安装:```sudoyuminstallh

See all articles