js实践题(有图)

题目的HTML代码：
<body>
    <input id="txt" type="text" value="text value" style="float: left" />
    <div style="clear: both; float: left">
        a line of very very long text<br />
        a line of very very long text<br />
        a line of very very long text<br />
        a line of very very long text<br />
        a line of very very long text<br />
        a line of very very long text<br />
        a line of very very long text<br />
        a line of very very long text<br />
        a line of very very long text<br />
        a line of very very long text<br />
    </div>
</body>

<body>
    <input id="txt" type="text" value="text value" style="float: left" />
    <div id="box1" style="display:none;clear: both; float: left;border:1px solid #ff0;background:#f49;">
        Pop up text width border <br />
        Pop up text width border <br />
        Pop up text width border <br />
    </div>
    <div style="clear: both; float: left">
        a line of very very long text<br />
        a line of very very long text<br />
        a line of very very long text<br />
        a line of very very long text<br />
        a line of very very long text<br />
        a line of very very long text<br />
        a line of very very long text<br />
        a line of very very long text<br />
        a line of very very long text<br />
        a line of very very long text<br />
    </div>
    <script>
        var id = document.getElementById('txt');
        var box = document.getElementById('box1');
        id.onfocus = function(){
            box.style.display = "block" ;
        };
        id.onblur = function(){
            box.style.display = "none" ;
        }
    </script>
</body>

>>4楼onfocus和onblur是焦点移动，题目中说是鼠标移出移入，应该是onmouseover和onmouseout。
而且，不知道你有没有注意到：题目中的弹出框是盖住文本区的，而不是顶出文本区。
感谢你的关注！

>>5楼Well done!
还有其他解法没？

大哥：自己定义 CSS呀

#5的会有边框的误差.改下 <script>
var doc = document.documentElement || document.body;
window.onload=function(){
var pad = document.getElementById("pad");
var txt = document.getElementById("txt");
pad.style.left = position(txt).left + 'px';
pad.style.top = position(txt).bottom + 'px';
}
function doOver(){
document.getElementById("pad").style.display = "block";
}
function doOut(){
document.getElementById("pad").style.display = "none";
}  var position = function(el) {
var rect = el.getBoundingClientRect();
return {bottom: Math.round(rect.bottom + (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)),
left: Math.round(rect.left + (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0))};
}
  </script>
  <body>
      <input id="txt" type="text" value="text value" style="float:left" onmouseout="doOut()" onmouseover="doOver()"/>
      <div style="clear: both; float: left">
         a line of very very long text <br />
         a line of very very long text <br />
         a line of very very long text <br />
         a line of very very long text <br />
         a line of very very long text <br />
         a line of very very long text <br />
         a line of very very long text <br />
         a line of very very long text <br />
         a line of very very long text <br />
         a line of very very long text <br />
      </div>
  <div id="pad" style="display:none;position:absolute;z-index:100;top:0;left:0;width:300px;border:1px solid #F00;background:#FFBFFF;padding:10px">
Pop up text with border <br>
Pop up text with border <br>
Pop up text with border <br>
  </div>
  </body>

调试易

js实践题(有图)

解决方案 »