您的位置:首页 > Web前端 > JavaScript

JavaScript获取Input输入框的屏幕绝对位置

2017-06-01 00:00 357 查看
需求:使用JavaScript,在input输入框被点击时获取input坐标的绝对位置,

原理:根据js中的元素offsetLeft、offsetTop获取相对于父元素的X、Y坐标相对位置,然后遍历到最顶层的body元素,逐步叠加距离,最终获取的位置即为input的绝对位置。

代码如下:

//获取x坐标
function getXPosition(e){
var x=e.offsetLeft;
while(e=e.offsetParent)
{
x+=e.offsetLeft;
}
return x-260;//-260防止屏幕超出
}
//获取y坐标
function getYPosition(e){
var y=e.offsetTop;
while(e=e.offsetParent)
{
y+=e.offsetTop;
}
return y+80;//80为input高度
}

//调用
$(".input").on("click",function(event){
alert("x:"+getXPosition(this)+",Y:"+getYPosition(this));
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  js javascript input坐标