INPUT点击触发显示DIV浮动框

酒醉一生人 发表于:2018-10-20 10:38 阅读: 259次

在项目中,INPUT输入框经常遇到在输入时,需要提示输入信息,介于界面布局没有多余的位置,需要通过DIV浮动框来显示,经过多次修正,将完美的代码记录如下:

HTML部分:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>

    <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
    </head>
    <body>
        <input name="videoCategorys" onclick="showHtml(this)" onblur="hideHtml(this)">
    <input name="videoCategorys" onclick="showHtml(this)" onblur="hideHtml(this)">
    <input name="videoCategorys" onclick="showHtml(this)" onblur="hideHtml(this)">
    <div id='aa' style='display: none;position:absolute; height:200px; min-width:150px; background-color:white;border:1px solid;overflow-y:auto;overflow-x:auto;z-index: 999999'> 1111111111111111</div>



    </body>
</html>

JS代码:

     function showHtml(obj){
            var stationOffsetleft = $(obj).offset().left;
            var stationOffsettop = $(obj).offset().top;
            var outerHeight = $(obj).outerHeight();
            $("#aa").css({left:stationOffsetleft + "px", top:stationOffsettop + outerHeight + "px"});
            $("#aa").slideDown("fast")
        }
        function hideHtml(obj){
            $("#aa").fadeOut("fast")
        }
酷码派 [KuMaPai.COM] - 陕ICP备案证 18010024号-2