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

 我来答

2个回答

#热议# 上班途中天气原因受伤算工伤吗？

ksksj386
2012-12-02

知道答主

回答量：10

采纳率：0%

帮助的人：6万

我也去答题访问个人页

关注

展开全部

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

已赞过 已踩过<

评论收起

爱的轩言521
2015-07-23 · TA获得超过4.2万个赞

知道大有可为答主

回答量：1万

采纳率：90%

帮助的人：1600万

我也去答题访问个人页

关注

展开全部

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


本回答被网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

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

其他类似问题

为你推荐：