利用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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
JavaScript canvas实现流星特效
May 20 Javascript
React四级菜单的实现
Apr 08 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
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
javascript动态创建及删除元素的方法
2014/12/22 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
python使用心得之获得github代码库列表
2014/06/25 Python
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
使用Python实现分别输出每个数组
2019/12/06 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
keras topN显示,自编写代码案例
2020/07/03 Python
幼儿园中班教学反思
2014/02/10 职场文书
《散步》教学反思
2014/03/02 职场文书
道德之星事迹材料
2014/05/03 职场文书
村级个人对照检查材料
2014/08/22 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
追悼词范文大全
2015/06/23 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
python自然语言处理之字典树知识总结
2021/04/25 Python
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
MySQL Server 层四个日志
2022/03/31 MySQL