利用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 相关文章推荐
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 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
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
PHP7 标准库修改
2021/03/09 PHP
用javascript实现画板的代码
2007/09/05 Javascript
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
动态添加js事件实现代码
2009/03/12 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
JS面向对象编程详解
2016/03/06 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
举例讲解Python常用模块
2019/03/08 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
python推导式的使用方法实例
2021/02/28 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
应届生个人求职信模板
2013/11/26 职场文书
生物学学生自我评价
2014/01/17 职场文书
企业员工集体活动方案
2014/08/17 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
教师节主持词开场白
2015/05/29 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis