利用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 相关文章推荐
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 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 抽象类的简单应用
2011/09/06 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
PHP7 windows支持
2021/03/09 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
复制本贴标题和地址的js代码
2008/07/01 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
Python解决鸡兔同笼问题的方法
2014/12/20 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
开展创先争优活动总结
2014/08/28 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
发布会邀请函
2015/01/31 职场文书
先进个人总结范文
2015/02/15 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
MySQL优化之慢日志查询
2022/06/10 MySQL