利用javaScript实现点击输入框弹出窗体选择信息


Posted in Javascript onDecember 11, 2013

在这里奉上源代码,没有做样式处理,不过功能是可以的,希望大家可以和我交流交流!

<html>
 <head>
  <title>点击弹出DIV选择信息</title>
     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
     <meta http-equiv="description" content="this is my page">
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 </head> <body>
  <input type="text" onfocus="alertDivINFO(this, 'id', 'name', true, true, 600, 300, 'arrs')" />
  <div style="position: absolute;"></div>
 </body>
</html>

<script type="text/javascript">
 //数组信息
 var arrs = new Array();
 arrs.push({id:"1", name:"张三3"});
 arrs.push({id:"2", name:"李四3"});
 arrs.push({id:"3", name:"申午武3"});
 arrs.push({id:"4", name:"周琬淞3"});
 arrs.push({id:"5", name:"覃晓为3"});
 arrs.push({id:"6", name:"王五"});
 arrs.push({id:"7", name:"宝典3"});
/**
 * obj: 点击文本框的对象
 * idStr: json数组的id键名
 * nameStr: json数组的name键名
 * bool:  true:表示追加 false:表示重新赋值
 * boolSet: true:ID和Name的值都显示 false:只显示Name的值
 * widthNum: 信息DIV的宽度
 * heightNum: 信息DIV的高度
 * arrName: 数组名称
 */
function alertDivINFO(obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName){
 obj.blur();
 if(!widthNum){
  widthNum = 600;
 }
 if(!heightNum){
  heightNum = 350;
 }
 //创建大的DIV
 var alertDivParent = document.createElement("div");
 alertDivParent.id = "alertDivParent";
 with(alertDivParent.style){
  top = 0;
  left = 0;
  position = "absolute";
  background = "#EEEEEE";
  filter  = "alpha(opacity=70)";
  opacity = 0.7;
  width  = Math.max(document.body.clientWidth, document.body.scrollWidth);
  height  = Math.max(document.body.clientHeight, document.body.scrollHeight);
 }
 document.body.appendChild(alertDivParent);
 //创建小的DIV
 var alertDiv = document.createElement("div");
 alertDiv.id = "alertDiv";
 with(alertDiv.style){
  width = widthNum;
  height = heightNum;
  position = "absolute";
  background = "#DDDDDD";
  left  = (Math.max(document.body.clientWidth, document.body.scrollWidth) - widthNum) / 2;
  top  = (Math.max(document.body.clientHeight, document.body.scrollHeight) - heightNum) / 2;
 }
 //添加到窗体
 document.body.appendChild(alertDiv);
 //创建搜索的DIV
 var alertQueryDiv = document.createElement("div");
 alertQueryDiv.id = "alertQueryDiv";
 //将搜索的DIV添加到信息DIV
    alertDiv.appendChild(alertQueryDiv);
    alertQueryDiv.innerHTML = "搜索   名称:";
    //创建文本框
    var alertQueryINPUT = document.createElement("input");
    alertQueryINPUT.id = "alertQueryINPUT";
    alertQueryINPUT.type = "text";
    //将文本框添加到搜索的DIV
    alertQueryDiv.appendChild(alertQueryINPUT);
    //创建搜索按钮
    var alertQueryBUTTON = document.createElement("input");
 alertQueryBUTTON.id = "alertQueryBUTTON";
    alertQueryBUTTON.type = "button";
    alertQueryBUTTON.value = " 搜 索 ";
    //给按钮添加事件
    alertQueryBUTTON.onclick = function(){
  //计算该宽度可放多少单元格
  var tdWidthNum = 130;
  var tdNum = parseInt(widthNum / tdWidthNum);
     var num = 0;
     var j = 0;
     //获取显示信息的Table
  var alertInfoTab = document.getElementById("alertInfoTab");
  //清空THead的信息
  alertInfoTab.deleteTHead();
     //循环数组
  for(var i = 0; i < eval(arrName).length; i ++){
   //如果与数组中的相等就添加到TABLE
      if(eval(arrName + "[i]." + nameStr).indexOf(alertQueryINPUT.value) >= 0){
    var header;
    if(j % tdNum == 0){
     header = alertInfoTab.createTHead();
     header = header.insertRow(num);
     num ++;
    }
    j ++;
    var headerName = header.insertCell(-1);
    with(headerName.style){
     width = tdWidthNum;
     color = "blue";
     cursor = "pointer";
    }
    if(boolSet)
     headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));
    else if(!boolSet)
     headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));
    headerName.onclick = function(){
     if(bool)
      obj.value = obj.value + this.innerHTML + ";";
     else if(!bool)
      obj.value = this.innerHTML;
     //移除弹出的窗体
     document.body.removeChild(alertDiv);
     document.body.removeChild(alertDivParent);
    };
   }
     }
    };
    //将按钮添加到搜索的DIV
    alertQueryDiv.appendChild(alertQueryBUTTON);
    //创建清空按钮
    var alertClearBUTTON = document.createElement("input");
 alertClearBUTTON.id = "alertClearBUTTON";
    alertClearBUTTON.type = "button";
    alertClearBUTTON.value = " 清 空 ";
    alertClearBUTTON.onclick = function(){
     //给文本框赋空值
     obj.value = "";
  //移除弹出的窗体
  document.body.removeChild(alertDiv);
  document.body.removeChild(alertDivParent);
    };
    //将按钮添加到搜索的DIV
    alertQueryDiv.appendChild(alertClearBUTTON);
    //创建关闭按钮
    var alertCancelBUTTON = document.createElement("input");
 alertCancelBUTTON.id = "alertCancelBUTTON";
    alertCancelBUTTON.type = "button";
    alertCancelBUTTON.value = " 关 闭 ";
    alertCancelBUTTON.onclick = function(){
  //移除弹出的窗体
  document.body.removeChild(alertDiv);
  document.body.removeChild(alertDivParent);
    };
    //将按钮添加到搜索的DIV
    alertQueryDiv.appendChild(alertCancelBUTTON);
 //创建显示信息的Table
 var alertInfoTab = document.createElement("table");
 alertInfoTab.id = "alertInfoTab";
 with(alertInfoTab.style){
  margin = 20;
 }
 //计算该宽度可放多少单元格
 var tdWidthNum = 130;
 var tdNum = parseInt(widthNum / tdWidthNum);
    var num = 0;
 for(var i = 0; i < eval(arrName).length; i ++){
  var header;
  if(i % tdNum == 0){
   header = alertInfoTab.createTHead();
   header = header.insertRow(num);
   num ++;
  }
  var headerName = header.insertCell(-1);
  with(headerName.style){
   width = tdWidthNum;
   color = "blue";
   cursor = "pointer";
  }
  //var headerType = header.insertCell(-1);
  if(boolSet)
   headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));
  else if(!boolSet)
   headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));
  //headerType.appendChild(document.createTextNode("Type"));
  headerName.onclick = function(){
   if(bool)
    obj.value = obj.value + this.innerHTML + ";";
   else if(!bool)
    obj.value = this.innerHTML;
   //移除弹出的窗体
   document.body.removeChild(alertDiv);
   document.body.removeChild(alertDivParent);
  };
 }
 //将table添加到显示信息的DIV
    alertDiv.appendChild(alertInfoTab);
}
</script>
Javascript 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
javascript类继承机制的原理分析
Sep 12 Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
Mongoose中document与object的区别示例详解
Sep 18 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 #Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 #Javascript
js为空或不是对象问题的快速解决方法
Dec 11 #Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 #Javascript
javascript弹出层输入框(示例代码)
Dec 11 #Javascript
深入理解javascript中defer的作用
Dec 11 #Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 #Javascript
You might like
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
Python集合操作方法详解
2020/02/09 Python
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
法学毕业生自荐信
2013/11/13 职场文书
装修施工安全责任书
2014/07/24 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
公司离职证明标准格式
2014/11/18 职场文书
人事任命通知
2015/04/20 职场文书
员工给公司的建议书
2019/06/24 职场文书
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL