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继承--原型链继承和类式继承
Apr 08 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
element中el-container容器与div布局区分详解
May 13 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 显示客户端IP与服务器IP的代码
2010/10/12 PHP
php递归json类实例
2014/12/02 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
js文件Cookie存取值示例代码
2014/02/20 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
python将txt文件读取为字典的示例
2018/12/22 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
Django自带的用户验证系统实现
2020/12/18 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
社区工作者思想汇报
2014/01/13 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
调解书格式范本
2015/05/20 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android