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 相关文章推荐
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
Table冻结表头示例代码
Aug 20 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
javascript关于继承解析
May 10 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
wxPython 入门教程
2008/10/07 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
python 实现控制鼠标键盘
2020/11/27 Python
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
.NET概念性的面试题
2012/02/29 面试题
研究生自荐信
2013/10/09 职场文书
日语翻译个人求职的自我评价
2013/10/14 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
停电放假通知
2015/04/14 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript