JavaScript和jQuery获取input框的绝对位置实现方法


Posted in Javascript onOctober 13, 2016

实例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
 <title>javascript与jQuery设置取得div绝对位置一个小应用(像日历控件一样,在编辑框下面显示一个层)</title>
 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 <script type="text/javascript">
  //全局变量,获得焦点的ID
  var onFocusID = "";
  //取得绝对位置
  function absPos(node){
   var x=y=0;
   do{
    x+=node.offsetLeft;
    y+=node.offsetTop;
   }while(node=node.offsetParent); 
   return{ 
    'x':x, 
    'y':y 
   };  
  }
  //显示省份
  function showProvince(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;
  }
  //隐藏省份
  function hideProvince(){
   jQuery("#divProvince").hide();
  }
  //
  $(function(){
   $("#divProvince input").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><input id="txtOne" type="text" onfocus="showProvince(this);" /></td>
  </tr>
  <tr>
   <td>省份</td>
   <td><input id="txtTwo" type="text" onfocus="showProvince(this);" /></td>
  </tr>
 </table>
 <div id="divProvince" style="display:none; position:absolute;width:260px;background-color:#BFEBEE; border:1px solid #BEC0BF;padding:5px;font-size:12px;">
  <input id="Radio1" type="radio" value="北京" />北京
  <input id="Radio2" type="radio" value="上海" />上海
  <input id="Radio3" type="radio" value="天津" />天津
  <input id="Radio4" type="radio" value="重庆" />重庆
  <input id="Radio5" type="radio" value="安徽" />安徽
  <input id="Radio6" type="radio" value="福建" />福建
  <input id="Radio7" type="radio" value="甘肃" />甘肃
  <input id="Radio8" type="radio" value="广东" />广东
  <input id="Radio9" type="radio" value="广西" />广西
  <input id="Radio10" type="radio" value="贵州" />贵州
  <input id="Radio11" type="radio" value="海南" />海南
  <input id="Radio12" type="radio" value="河北" />河北
  <input id="Radio13" type="radio" value="河南" />河南
  <input id="Radio14" type="radio" value="黑龙江" />黑龙江
  <input id="Radio15" type="radio" value="湖北" />湖北
  <input id="Radio16" type="radio" value="湖南" />湖南
  <input id="Radio17" type="radio" value="吉林" />吉林
  <input id="Radio18" type="radio" value="江苏" />江苏
  <input id="Radio19" type="radio" value="江西" />江西
  <input id="Radio20" type="radio" value="辽宁" />辽宁
  <input id="Radio21" type="radio" value="内蒙古" />内蒙古
  <input id="Radio22" type="radio" value="宁夏" />宁夏
  <input id="Radio23" type="radio" value="青海" />青海
  <input id="Radio24" type="radio" value="山东" />山东
  <input id="Radio25" type="radio" value="山西" />山西
  <input id="Radio26" type="radio" value="陕西" />陕西
  <input id="Radio27" type="radio" value="四川" />四川
  <input id="Radio28" type="radio" value="西藏" />西藏
  <input id="Radio29" type="radio" value="新.疆" />新.疆
  <input id="Radio30" type="radio" value="云南" />云南
  <input id="Radio31" type="radio" value="浙江" />浙江
  <input id="Radio32" type="radio" value="香港" />香港
  <input id="Radio33" type="radio" value="澳门" />澳门
  <input id="Radio34" type="radio" value="台湾" />台湾
  <span style="cursor:pointer;color:red;" onclick="hideProvince();">取消</span>
 </div>
</body>
</html>

以上就是小编为大家带来的JavaScript和jQuery获取input框的绝对位置实现方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 #Javascript
Javascript中this绑定的3种方法与比较
Oct 13 #Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 #Javascript
jquery  实现轮播图详解及实例代码
Oct 12 #Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 #Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 #Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 #Javascript
You might like
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
Python使用chardet判断字符编码
2015/05/09 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
解决c++调用python中文乱码问题
2020/07/29 Python
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
公司演讲稿开场白
2014/08/25 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书