JavaScript和jQuery获取input框的绝对位置实现方法
实例如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript与jQuery设置取得div绝对位置一个小应用(像日历控件一样，在编辑框下面显示一个层)</title>
<scripttype="text/javascript"src="jquery-1.3.2.min.js"></script>
<scripttype="text/javascript">
//全局变量，获得焦点的ID
varonFocusID="";
//取得绝对位置
functionabsPos(node){
varx=y=0;
do{
x+=node.offsetLeft;
y+=node.offsetTop;
}while(node=node.offsetParent);
return{
'x':x,
'y':y
};
}
//显示省份
functionshowProvince(obj){
//javascript的方法
//jQuery("#divProvince").css("left",absPos(obj).x);
//jQuery("#divProvince").css("top",absPos(obj).y+jQuery(obj).outerHeight());
//jQuery的方法
jQuery("#divProvince").css("left",jQuery(obj).offset().left);
jQuery("#divProvince").css("top",jQuery(obj).offset().top+jQuery(obj).outerHeight());
jQuery("#divProvince").show();
onFocusID=obj.id;
}
//隐藏省份
functionhideProvince(){
jQuery("#divProvince").hide();
}
//
$(function(){
$("#divProvinceinput").each(function(){
$(this).click(function(){
//this.checked="checked";
//alert(jQuery(this).attr("value"));
if(onFocusID!=""){
$("#"+onFocusID).val($(this).val());
}
$("#divProvince").hide();
});
});
});
</script>
</head>
<body>
<table>
<tr>
<td>省份</td>
<td><inputid="txtOne"type="text"onfocus="showProvince(this);"/></td>
</tr>
<tr>
<td>省份</td>
<td><inputid="txtTwo"type="text"onfocus="showProvince(this);"/></td>
</tr>
</table>
<divid="divProvince"style="display:none;position:absolute;width:260px;background-color:#BFEBEE;border:1pxsolid#BEC0BF;padding:5px;font-size:12px;">
<inputid="Radio1"type="radio"value="北京"/>北京
<inputid="Radio2"type="radio"value="上海"/>上海
<inputid="Radio3"type="radio"value="天津"/>天津
<inputid="Radio4"type="radio"value="重庆"/>重庆
<inputid="Radio5"type="radio"value="安徽"/>安徽
<inputid="Radio6"type="radio"value="福建"/>福建
<inputid="Radio7"type="radio"value="甘肃"/>甘肃
<inputid="Radio8"type="radio"value="广东"/>广东
<inputid="Radio9"type="radio"value="广西"/>广西
<inputid="Radio10"type="radio"value="贵州"/>贵州
<inputid="Radio11"type="radio"value="海南"/>海南
<inputid="Radio12"type="radio"value="河北"/>河北
<inputid="Radio13"type="radio"value="河南"/>河南
<inputid="Radio14"type="radio"value="黑龙江"/>黑龙江
<inputid="Radio15"type="radio"value="湖北"/>湖北
<inputid="Radio16"type="radio"value="湖南"/>湖南
<inputid="Radio17"type="radio"value="吉林"/>吉林
<inputid="Radio18"type="radio"value="江苏"/>江苏
<inputid="Radio19"type="radio"value="江西"/>江西
<inputid="Radio20"type="radio"value="辽宁"/>辽宁
<inputid="Radio21"type="radio"value="内蒙古"/>内蒙古
<inputid="Radio22"type="radio"value="宁夏"/>宁夏
<inputid="Radio23"type="radio"value="青海"/>青海
<inputid="Radio24"type="radio"value="山东"/>山东
<inputid="Radio25"type="radio"value="山西"/>山西
<inputid="Radio26"type="radio"value="陕西"/>陕西
<inputid="Radio27"type="radio"value="四川"/>四川
<inputid="Radio28"type="radio"value="西藏"/>西藏
<inputid="Radio29"type="radio"value="新.疆"/>新.疆
<inputid="Radio30"type="radio"value="云南"/>云南
<inputid="Radio31"type="radio"value="浙江"/>浙江
<inputid="Radio32"type="radio"value="香港"/>香港
<inputid="Radio33"type="radio"value="澳门"/>澳门
<inputid="Radio34"type="radio"value="台湾"/>台湾
<spanstyle="cursor:pointer;color:red;"onclick="hideProvince();">取消</span>
</div>
</body>
</html>
以上就是小编为大家带来的JavaScript和jQuery获取input框的绝对位置实现方法全部内容了，希望大家多多支持毛票票~