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 相关文章推荐
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
vue实现购物车小案例
Sep 27 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
在JavaScript中如何使用宏详解
May 06 Javascript
前端JavaScript大管家 package.json
Nov 02 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代码(抓取网页中的邮箱地址)
2012/07/17 PHP
php向js函数传参的几种方法
2014/08/10 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
Python解析json文件相关知识学习
2016/03/01 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
Python中字符串与编码示例代码
2019/05/20 Python
Python pip 常用命令汇总
2020/10/19 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
教育局长自荐信范文
2013/12/22 职场文书
暑期社会实践感言
2014/02/25 职场文书
股份合作协议书范本
2014/04/14 职场文书
社保委托书怎么写
2014/08/02 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS