文本框焦点控制层的显示和隐藏

当文本框获取焦点时弹出一个层当失去焦点时层自动隐藏
这个怎么写求助？？？？？？？？？？？？？？？

解决方案 »

  1.   

    当触发onfocus事件,就设置层的display属性为block，onblur事件就设置display属性为none
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>show div and move on div</title>
    <style type="text/css">
        .floatPic{
            display:none;
            position:absolute;
            width:200px;
            height:100px;
            boder:1px;
            background:lightblue;
        }
    </style>
    <script type="text/javascript">
        var fhide=true;
        function ShowFloatPic(obj,evt)
        {
            fhide=false;
            var div=document.getElementById("divinfo");
            div.innerHTML="";
            var itext=obj.value;
            var tnode=document.createTextNode(itext,true);
            div.appendChild(tnode);
            div.style.display="block";
            div.style.left=evt.clientX+30;
            div.style.top=evt.clientY;
        }
        function prepareHide()
        {
            fhide=true;
            setTimeout("tryHide()",500);
            //setTimeout(function(){if (fhide){HideFloatPic();}},500);
        }
        function tryHide()
        {
            if (fhide)
            {
                HideFloatPic();
            }
        }
        function HideFloatPic()
        {
            var div=document.getElementById("divinfo");
            div.style.display="none";
        }
        function cancelHide()
        {
            fhide=false;
        }
    </script>
    </head><body style="margin:0;padding:0">
        <input type="text" onfocus="ShowFloatPic(this,event)" onblur="prepareHide()" value="文本框" />
        <div id="divinfo" class="floatPic" onmouseover="cancelHide();" onmouseout="HideFloatPic();" ></div>
    </body></html>
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>TEST</title>
    <style type="text/css"> 
    body,td,div,input,fieldset,legend{font-family:Verdana; font-size:12px; color:#333333; font-weight:normal;}
    td{line-height:20px;}
    a:link,a:visited{font-family:Verdana; font-size:12px; color:#330099; font-weight:normal; text-decoration:none;}
    a:hover,a:active{font-family:Verdana; font-size:12px; color:#FF6600; font-weight:normal; }
    span{font-family:Verdana; font-size:12px; color:red; font-weight:normal; display:block; margin:0px 10px;}
    #div01{display:none;}
    </style>
    </head>
    <script type="text/javascript" >
    function $(id){
    return "string" == typeof(id) ? document.getElementById(id) : id;
    }function chan(divID,flag){
    var oid=divID;
    if(oid=="") return;
    var o=$(oid);
    var f=flag.toLowerCase();
    if(f=="hide") o.style.display="none";
    else o.style.display="block";
    }
    </script>
    <body>
    <input name="inputx01" type="text" value="点击这里试看" onfocus="chan('div01','show');" onblur="chan('div01','hide');" />
    <input name="inputx02" type="text" value="value02" />
    <div id="div01" style="border:1px solid red; width:300px;">
    Tip: your massege...
    </div></body>
    </html>
      

  4.   

    onfocus是得到焦点时触发   
    onblur是失去焦点时触发
      

  5.   

    我是这样写的可是没反应啊下面是部分代码
    文本框：<input type="text" style="width:103px" name="year" id="timeid" value="" onfocus="showTable(this,this.id)" onblur="closeTable();" >
    js：var idtt;
    document.writeln("<div id='mydate' style='position:absolute;width:160px;'></div>");
    function closeTable(){ 

    document.getElementById(mydate).style.display="none";
         }  
    function showTable(InputBox,idt){
    idtt=idt;
    var x, y;
        var DivContent;
        var o = InputBox;
        //显示的位置   
        x = o.offsetLeft;
        y = o.offsetTop;
        while (o = o.offsetParent) {
            x += o.offsetLeft;
            y += o.offsetTop;
         
        }
        document.all.mydate.style.left = x + 2;
        document.all.mydate.style.top = y + 20;
        document.all.mydate.style.visibility = "visible";