您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
利用javaScript实现点击输入框弹出窗体选择信息
作者：佚名 责任编辑：admin 更新时间：2022-06-22
这篇文章主要是对利用javaScript实现点击输入框弹出窗体选择信息进的实例行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
在这里奉上源代码，没有做样式处理，不过功能是可以的，希望大家可以和我交流交流！ 代码如下: <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;- 上一个程序编程： 判断javascript的数据类型
- 下一个程序编程： JQuery快速实现Tab的AJAX动态载入实例讲解
