笔记 - 润新知

笔记
JS实现点击文本框弹出DIV层
<html>

<head>

<meta name="GENERATOR" content="Microsoft FrontPage 6.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>new page</title>

<script type="text/javascript" language="javascript">

function crertdiv(_parent,_element,_id,_css){//创建层

                var newObj = document.createElement(_element);

                if(_id && _id!="")newObj.id=_id;

                if(_css && _css!=""){

                        newObj.setAttribute("style",_css);

                        newObj.style.cssText = _css;

                }

                if(_parent && _parent!=""){

                        var theObj=getobj(_parent);

                        var parent = theObj.parentNode;

                        if(parent.lastChild == theObj){

                                theObj.appendChild(newObj);

                        }

                        else{

                                theObj.insertBefore(newObj, theObj.nextSibling);

                        }

                }

                else        document.body.appendChild(newObj);

}

function getobj(o){//获取对象

                return document.getElementById(o)

}

var swtemp=0,objtemp;

function showdiv(inputid,inputlist){//显示层

        if (swtemp==1){getobj(objtemp+"mydiv").style.display="none";}

        var text_list=inputlist.split(",")

                if (!getobj(inputid+"mydiv")){//若尚未创建就建之

                        var divcss="font-size:12px;color:#00f;position:absolute;left:"+(getobj(inputid).offsetLeft+0)+"px;top:"+(getobj(inputid).offsetTop+25)+"px;border:1px solid red"

                        crertdiv("","div",inputid+"mydiv",divcss);//创建层"mydiv"

                        //alert(document.getElementById("mydiv").outerHTML)

                        crertdiv(inputid+"mydiv","ul",inputid+"myul");//创建ul

                        for (var i=0,j=text_list.length;i<j;i++){//创建"text_list"li

                                crertdiv(inputid+"myul","li",inputid+"li"+i,"background:#fff");

                                getobj(inputid+"li"+i).innerHTML=text_list;

                        }

                        crertdiv(inputid+"myul","li",inputid+"li"+j,"color:#f00;background:#fff");//创建"clear"li

                        getobj(inputid+"li"+j).innerHTML="clear";

                        getobj(inputid+"mydiv").innerHTML +="<style type='text/css'>#"+inputid+"mydiv ul {padding:0px;margin:0;}#"+inputid+"mydiv ul li{list-style-type:none;padding:5px;margin:0;float:left;CURSOR: pointer;}</style>"

                        for (var i=0;i<=j;i++){

                                        getobj(inputid+"li"+i).onmouseover=function(){this.style.background="#eee";clearTimeout(timer)}

                                        getobj(inputid+"li"+i).onmouseout=function(){this.style.background="#fff"}

                        }

                }

                var newdiv=getobj(inputid+"mydiv")

                newdiv.onclick=function(){hiddiv(event,inputid);}

                newdiv.onmouseout=function(){Mout(this)}

                newdiv.onmouseover=function(){clearTimeout(timer)}

                getobj(inputid).onmouseout=function(){Mout(newdiv)}

                newdiv.style.display="block";

                swtemp=1;

                objtemp=inputid;

}

var timer

function Mout(o){

timer=setTimeout(function(){o.style.display="none";},300)

                swtemp=0;

}

function hiddiv(e,inputid){

    e=e||window.event;

    ev=e.target||e.srcElement;

    v=ev.innerText||ev.textContent;

    if (v!="clear")getobj(inputid).value=v;else getobj(inputid).value=""

                getobj(inputid+"mydiv").style.display="none";

}

</script>

</head>

<body>

<br>

<br>

<br>

<br>

....利用定义标签赋值....（onclick）....<input id="mytext" type="text"onclick="showdiv(this.id,this.list)" list="文本框,弹出层,值赋"/>

<br>

<br>

<script>

var list="文本框2,弹出层2,值赋2,文本框2-1,弹出层2-1,值赋2-1"

</script>

....利用定义JS变量赋值...（onclick）....<input id="mytext2" type="text" onClick="showdiv(this.id,list)"/>

<input type="hidden" value="点击,弹出,显示,消失,实现" id="list">

....利用隐藏域值赋值....（onmouseover）.....<input id="mytext3" type="text" onMouseOver="showdiv(this.id,getobj('list').value)"/>

</body>

</html>
相关阅读:
【Manacher（马拉车）算法】
【可持久化数据结构】
react-dva修改默认端口的方法
 关于React Hooks使用
 react hook useContext 跨文件接收
 el-select中使用el-tooltip时，在下拉滚动时整个网页会出现滚动条，并抖动
 react的onClick执行函数和bind（this）问题
 禁用h5页面中长按图片弹出的弹层
 JS树结构操作:查找、遍历、筛选、树结构和列表结构相互转换
 js树结构查找节点
原文地址：https://www.cnblogs.com/net-study/p/3288582.html

笔记

JS实现点击文本框弹出DIV层