在<input type=text>下动态添加一个div

此回复为自动发出,仅用于显示而已，并无任何其他特殊作用
楼主【millfox】截止到2008-07-01 17:17:55的历史汇总数据(不包括此帖)：
发帖数:18                 发帖分:510                
结贴数:17                 结贴分:490                
未结数:1                  未结分:20                 
结贴率:94.44 %            结分率:96.08 %            
值得尊敬

解决方案 »

  1.   

    干吗要生成一个div？你先写一个在text下面，自己把宽带调好了，然后隐藏，等点击text的时候触发再把div显示出来不就好了
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>Test</title>
    <script type="text/javascript">
    function CPos(x, y)
    {
        this.x = x;
        this.y = y;
    }
    function CreateDiv(obj)
    {
     var target = obj;
        var pos = new CPos(target.offsetLeft, target.offsetTop);
        
        var target = target.offsetParent;
        while (target)
        {
            pos.x += target.offsetLeft;
            pos.y += target.offsetTop;
            
            target = target.offsetParent
        }

        var box = document.createElement("div");
        box.style.backgroundColor = "silver";
        box.style.offsetLeft=pos.x+"px";
    box.style.offsetTop=pos.y+"px";
    box.style.width=obj.clientWidth;
    box.style.height=obj.clientHeight;
    box.innerHTML="aaa";
        document.body.appendChild(box);
    }</script>
    </head><body><div>
    <input type="button" value="无关控件" />
    </div><input type="button" value="无关控件" /><input  type="text" onclick="CreateDiv(this)" /><input type="button" value="无关控件" onclick="javascript:var pos = CreateDiv(this);alert('此按钮距页面左端 '+pos.x+' 像素，上端 '+pos.y+' 像素');"></body></html>
    呵呵，稍微调下位置就可以了
      

  3.   

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>标题页</title></head>
    <body>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>所属区域</td>
            <td><input type="text" id="txtRegion" />
                <div id="divList" style="display: none; border: 1px solid #0000aa; overflow: hidden; height: 150px; position: absolute; background-color: #ccffff;">
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                            <div style="overflow: auto; width: 100%; height: 132px; background-color: ##ffffcc;">
                            <ul><b>中国</b>
                                <ul><b>华北地区</b>
                                    <li>北京</li>
                                    <li>天津</li>
                                    <li>内蒙古</li>
                                    <li>河北</li>
                                    <li>河南</li>
                                </ul>
                                <ul><b>华东地区</b>
                                    <li>上海</li>
                                    <li>江西</li>
                                    <li>江苏</li>
                                    <li>浙江</li>
                                </ul>
                            </ul>
                            </div>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" id="tdClose" style="cursor: hand; background-color: #ff8888;">Close</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
     </table>
    <script LANGUAGE="JavaScript">
    var oRegion = document.getElementById("txtRegion");   //需要弹出下拉列表的文本框
    var oDivList = document.getElementById("divList"); //要弹出的下拉列表
    var oClose = document.getElementById("tdClose");　　　//关闭div的单元格，也可使用按钮实现
    var colOptions = document.getElementsByTagName("li"); //所有列表元素
    var bNoAdjusted = true;
    oClose.onclick = function()
    {
        oDivList.style.display = "none";　　//隐藏div，实现关闭下拉框的效果
    };
    //设置下列选择项的一些事件
    for (var i=0; i<colOptions.length; i++)
    {
        colOptions[i].style.cursor = "hand";
        colOptions[i].onclick = function()　　　//为列表项添加单击事件
        {
            oRegion.value = this.innerText;
        };
        colOptions[i].onmouseover = function()　//为列表项添加鼠标移动事件
        {
            this.style.backgroundColor = "#ffff00";
        };
        colOptions[i].onmouseout = function()  //为列表项添加鼠标移走事件
        {
            this.style.backgroundColor = "";
        };
    }
    //文本获得焦点时的事件
    oRegion.onfocus = function()
    {
        oDivList.style.display = "block";
        if (bNoAdjusted)　　//控制div是否已经显示的变量
        {
            bNoAdjusted = false;
            //设置下拉列表的宽度和位置
            oDivList.style.width = this.offsetWidth + 50;
            oDivList.style.posTop = oDivList.offsetTop + this.offsetHeight;
            oDivList.style.posLeft = oDivList.offsetLeft - this.offsetWidth - 8;
        }
    };
    </script>
    </body>
    </html>
      

  4.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>Test</title>
    <script type="text/javascript">
    function CPos(x, y)
    {
        this.x = x;
        this.y = y;
    }
    function CreateDiv(obj)
    {
     var target = obj;
        var pos = new CPos(target.offsetLeft, target.offsetTop);
        
        var target = target.offsetParent;
        while (target)
        {
            pos.x += target.offsetLeft;
            pos.y += target.offsetTop;
            
            target = target.offsetParent
        }
        //return pos
    ddiv(obj.clientWidth,obj.clientHeight,pos.x,pos.y,'aaa')
    document.getElementById('aa').innerHTML+=ddiv(obj.clientWidth,obj.clientHeight,pos.x,pos.y,'aaa')
        //var box = document.createElement("div");
        //box.style.backgroundColor = "silver";
        //box.style.posLeft=pos.x;
       // box.style.posTop=pos.y+obj.clientHeight;
       // box.style.width=obj.clientWidth;
       // box.style.height=obj.clientHeight;
       // box.innerHTML="aaa";
       // document.body.appendChild(box);
    }
    function ddiv(w,h,l,t,value)
    {
    return "<div style='width:"+w+";height:"+h+";top:"+t+";left:"+l+";background:silver'>"+value+"</div>";
    }</script>
    </head><body><div>
    <input type="button" value="无关控件" />
    </div><input type="button" value="无关控件" /><div id="aa"><input  type="text" onclick="CreateDiv(this)" /></div><input type="button" value="无关控件" onclick="javascript:var pos = CreateDiv(this);alert('此按钮距页面左端 '+pos.x+' 像素，上端 '+pos.y+' 像素');"></body>
      

  5.   

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>标题页</title></head>
    <body>
    <input type="text" onfocus="show(this)"/>
    <script>
    function show(obj)
    {
    var width=obj.offsetWidth;
    var left=obj.offsetLeft;
    var top=obj.offsetTop+10;
    var div=document.createElement("div");
    div.style.background="red";
    div.style.left=left;
    div.style.top=top;
    div.style.width=width;
    div.style.height=100;
    document.body.appendChild(div);
    }
    </script>
    </body>
    </html>我的最标准 呵呵～
      

  6.   

    和他要求的效果 一样 
    尺魔大哥应该使用 offsetWidth
    clientWidth 是可见的宽度
    宽度貌似不对 
    我拿他的实验了下 
      

  7.   

    这个不起作用的div.style.left=left; 
    div.style.top=top; 
    这2个不起作用
      

  8.   

    你要是不信<input type="button" value="无关控件" /><input type="text" onfocus="show(this)"/>
    <script>
    function show(obj)
    {
    var width=obj.offsetWidth;
    var left=obj.offsetLeft;
    var top=obj.offsetTop+10;
    var div=document.createElement("div");
    div.style.background="red";
    div.style.left=left;
    div.style.top=top;
    div.style.width=width;
    div.style.height=100;
    document.body.appendChild(div);
    }
    </script>
    我就不明白div.style.left=left;
    div.style.top=top;这2个为什么不起作用，难道写法有错我6楼那个是用另外一个方法实现了他要的效果
      

  9.   

    div.style.left=left; 
    div.style.top=top; 怎么没用
    我试了 哈 
    我知道要是用 posLeft 和posTop
    可是为什么
    div.style.left=left; 
    div.style.top=top; 
    有用我也不知道
      

  10.   

    汗！！写漏了一个：
    完整的应该是：<script type="text/javascript">
    function CPos(x, y)
    {
        this.x = x;
        this.y = y;
    }
    function CreateDiv(obj)
    {
     var target = obj;
        var pos = new CPos(target.offsetLeft, target.offsetTop);
        
        var target = target.offsetParent;
        while (target)
        {
            pos.x += target.offsetLeft;
            pos.y += target.offsetTop;
            
            target = target.offsetParent
        }
     var box = document.createElement("div");
        box.style.backgroundColor = "silver";
    box.style.position="absolute";
        box.style.posLeft=pos.x;
        box.style.posTop=pos.y+obj.clientHeight+5;
        box.style.width=obj.clientWidth;
        box.style.height=obj.clientHeight;
        box.innerHTML="aaa";
       document.body.appendChild(box);
    }
    </script>
    <input type="button" value="无关控件" /><input type="button" value="无关控件" />
    <input  type="text" onclick="CreateDiv(this)" /><input type="button" value="无关控件" onclick="javascript:var pos = CreateDiv(this);alert('此按钮距页面左端 '+pos.x+' 像素，上端 '+pos.y+' 像素');">
      

  11.   

    晕
    呵呵～
     while (target)
        {
            pos.x += target.offsetLeft;
            pos.y += target.offsetTop;
            
            target = target.offsetParent
        }
    这句是做什么的 
      

  12.   


    你的那不是动态生成DIV的
    你的是隐藏的一个DIV
      

  13.   

    知道楼主要的是动态添加一个div而不是隐藏的
      

  14.   

    恩 学到了 顺便 那些是 ie 兼容的 
    offsetTop？ ff支持吗？
      

  15.   

    支持啊
    我写的那个是ff,ie都支持的你写的那个并不是获取当前控件的绝对位置，所以是错误的
      

  16.   

    <input type="button" value="无关控件" /><input type="text" onfocus="show(this)"/>
    <script>
    function show(obj)
    {
    var width=obj.offsetWidth;
    var left=obj.offsetLeft;
    var top=obj.offsetTop+10;
    var div=document.createElement("div");
    div.style.background="red";
    div.style.position="absolute";
    div.style.posLeft=left;
    div.style.posTop=top;
    div.style.width=width;
    div.style.height=100;
    document.body.appendChild(div);
    }
    </script>不信你自己看一下，你原来的那个没有div.style.position="absolute";这个，如果没有div.style.position="absolute";，那么div.style.left=left;
    div.style.top=top;不起作用的你看下是不是错位了遮住控件了
      

  17.   

    也就是说，17楼写的完全符合LZ说的
    “就是当点击text时，在下面动态生成一个DIV，这个DIV要在text的正下方出现，而且宽度与text的宽度相同。当这个控件放置在页面任何地方，这个DIV都能符合要求出现。”box.style.width=obj.clientWidth;宽度与text的宽度相同，使用这个差了一点，把改成box.style.width=obj.offsetWidth那么动态生成的div宽度与text的宽度就相同了 
      

  18.   

    整理下就是这样了：
    <script type="text/javascript">
    function CPos(x, y)
    {
        this.x = x;
        this.y = y;
    }
    function CreateDiv(obj)
    {
     var target = obj;
        var pos = new CPos(target.offsetLeft, target.offsetTop);
        
        var target = target.offsetParent;
        while (target)
        {
            pos.x += target.offsetLeft;
            pos.y += target.offsetTop;
            
            target = target.offsetParent
        }
        //return pos
        var box = document.createElement("div");
        box.style.backgroundColor = "silver";
    box.style.position="absolute";
        box.style.posLeft=pos.x;
        box.style.posTop=pos.y+obj.clientHeight+4;
        box.style.width=obj.offsetWidth;
        box.style.height=obj.clientHeight;
        box.innerHTML="aaa";
       document.body.appendChild(box);
    }</script>
    <div>
    <input type="button" value="无关控件" />
    </div><input type="button" value="无关控件" /><input type="button" value="无关控件" />
    <input  type="text" onclick="CreateDiv(this)" /><input type="button" value="无关控件" onclick="javascript:var pos = CreateDiv(this);alert('此按钮距页面左端 '+pos.x+' 像素，上端 '+pos.y+' 像素');">
      

  19.   


    <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";}
    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"getobj(inputid+"mydiv").innerHTML=inputlist;
    getobj(inputid+"mydiv").style.width = getobj(inputid).offsetWidth;
    }}
    </script>
    </head>
    <body><script>
    var list="这是一个层";
    </script><input type="button" value="无关控件" /><input type="button" value="无关控件" />
    <input id="mytext2" type="text" onclick="showdiv(this.id,list)"/></table>我的这个测试通过了
      

  20.   

    汗！我知道为什么2.0没效果了，没有必要像33楼那样，就用我17楼的，只是稍微改下
    <script type="text/javascript">
    function CPos(x, y)
    {
        this.x = x;
        this.y = y;
    }
    function CreateDiv(obj)
    {
     var target = obj;
        var pos = new CPos(target.offsetLeft, target.offsetTop);
        
        var target = target.offsetParent;
        while (target)
        {
            pos.x += target.offsetLeft;
            pos.y += target.offsetTop;
            
            target = target.offsetParent
        }
    var box = document.createElement("div");
        box.style.backgroundColor = "silver";
    box.style.position="absolute";
        box.style.left=pos.x+"px";
        box.style.top=pos.y+obj.clientHeight+4+"px";
        box.style.width=obj.offsetWidth+"px";
        box.style.height=obj.clientHeight+"px";
        box.innerHTML="aaa";
        document.body.appendChild(box);
    }</script>
    <div>
    <input type="button" value="无关控件" />
    </div><input type="button" value="无关控件" /><input type="button" value="无关控件" />
    <input  type="text" onclick="CreateDiv(this)" /><input type="button" value="无关控件" onclick="javascript:var pos = CreateDiv(this);alert('此按钮距页面左端 '+pos.x+' 像素，上端 '+pos.y+' 像素');">
    之前因为没有效果的原因是因为没有加上px这个，所以导致有错误box.style.left=pos.x+"px";
        box.style.top=pos.y+obj.clientHeight+4+"px";
        box.style.width=obj.offsetWidth+"px";
        box.style.height=obj.clientHeight+"px";
    因为FF不认识127这样的，只认识127px这样的宽度和高度，还有距离
      

  21.   

    大哥我一直在啊，我要抽空好好学习一下你写的代码。
    你写的太精彩了，各浏览器都兼容，而且很灵活，没有那许多的浏览器类型判断。还有33楼的s_liangchao1s大哥，你写的也很好，不过你大概没有考虑到页面是
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">的情况。
    我这边测试有点小问题。不过你的代码还是很值得学习的。谢谢关注这个问题的朋友们~
      

  22.   

    document.getElementById("div").style.top = document.getElementById("input_id").offsetTop + document.getElementById("input_id").offsetHeight;  //DIV.y坐标
    document.getElementById("div").style.left = document.getElementById("input_id").offsetLeft;                                                    //DIV.x坐标
    document.getElementById("div").style.width = document.getElementById("input_id").offsetWidth;                                                   //DIV.宽
             document.getElementById("div").style.width = 100px;                 //DIV.高 
    设输入框的ID=input_id.