通過javascript在輸入框下方彈出一個div

Question

我有這個輸入框：

<input type='text' size='2' name='action_qty' onmouseup='showHideChangePopUp()'>

和 div 彈出窗口：

<div id='div_change_qty' name='div_change_qty' style='display:none;width:200px;height:200px;position:absolute;z-index:10;background:darkgray' >
    <table width='100%' height='100%'>
        <tr><td width='20%'></td><td>Increase</td></tr>
        <tr><td width='20%'></td><td>Decrease</td></tr>
        <tr><td width='20%'></td><td>Move Items</td></tr>
        <tr><td width='20%'></td><td>Change Status</td></tr>
    </table>    
</div>

javascript函數如下：

function showHideChangePopUp(e){

        //alert('here')
        if ( event.clientX ) { // Grab the x-y pos.s if browser is IE.
            CurrentLeft = event.clientX + document.body.scrollLeft;
            CurrentTop  = event.clientY + document.body.scrollTop;
        }
        else {  // Grab the x-y pos.s if browser isn't IE.
            CurrentLeft = e.pageX ;
            CurrentTop  = e.pageY ;
        }  
        //if ( CurrentLeft < 0 ) { CurrentLeft = 0; };
        //if ( CurrentTop  < 0 ) { CurrentTop  = 0; };  

        document.getElementById('div_change_qty').style.display = 'block';
        document.getElementById('div_change_qty').style.top = CurrentTop ;
        document.getElementById('div_change_qty').style.left = CurrentLeft ;

        return true;
    }

在輸入框內單擊時，我需要將此 div 彈出窗口放在輸入框下方。 上面的函數將 div 放置在我們在輸入框內單擊的任何位置，但不是在輸入框的底部，這正是我想要的。 我如何更改 JS 函數來完成所需的任務。

Answer 1

我們都將您的原始帖子誤解為如何顯示或隱藏 div。

這是通過使用 input 元素的getClientRects將 div 直接放在輸入框下方的代碼：

 function showHideChangePopUp(e){ var div= document.querySelector('#div_change_qty'); var inp= document.querySelector('#action_qty'); var rect= inp.getClientRects(); div.style.display= 'block'; div.style.left= rect[0].left+'px'; div.style.top= rect[0].bottom+'px'; }

 <div id='div_change_qty' name='div_change_qty' style='display:none;width:200px;height:200px;position:absolute;z-index:10;background:darkgray' > <table width='100%' height='100%'> <tr><td width='20%'></td><td>Increase</td></tr> <tr><td width='20%'></td><td>Decrease</td></tr> <tr><td width='20%'></td><td>Move Items</td></tr> <tr><td width='20%'></td><td>Change Status</td></tr> </table> </div> <input type='text' size='2' name='action_qty' id="action_qty" onmouseup='showHideChangePopUp()'>

---

原帖

通常最好避免在 HTML 中使用 JavaScript。

下面將一個onmouseup處理程序附加到輸入，它會切換 div 的顯示。

它還附加了一個onblur處理程序，因此一旦您離開輸入框，div 就會消失。

 var qty= document.querySelector('#qty'); qty.onmouseup= function(e) { var div= document.querySelector('#div_change_qty'); div.style.display= div.style.display==='block'?'none':'block'; } qty.onblur= function(e) { var div= document.querySelector('#div_change_qty'); div.style.display= 'none'; }

 #div_change_qty{display:none;}

 <input type='text' size='2' name='action_qty' id="qty"> <div id='div_change_qty' name='div_change_qty' style='display:none;width:200px;height:200px;position:absolute;z-index:10;background:darkgray' > <table width='100%' height='100%'> <tr><td width='20%'></td><td>Increase</td></tr> <tr><td width='20%'></td><td>Decrease</td></tr> <tr><td width='20%'></td><td>Move Items</td></tr> <tr><td width='20%'></td><td>Change Status</td></tr> </table> </div> <input>

Answer 2

使用 JQuery

function showHideChangePopUp(){
    $(this).after($("#div_change_qty").html());
} 

Answer 3

喜歡這個？

 function showHideChangePopUp(){ document.getElementById('div_change_qty').style.display='block'?'block':'none'; }

 #div_change_qty{display:none;}

 <input type='text' size='2' name='action_qty' onmouseup='showHideChangePopUp()'> <div id='div_change_qty' name='div_change_qty' style='display:none;width:200px;height:200px;position:absolute;z-index:10;background:darkgray' > <table width='100%' height='100%'> <tr><td width='20%'></td><td>Increase</td></tr> <tr><td width='20%'></td><td>Decrease</td></tr> <tr><td width='20%'></td><td>Move Items</td></tr> <tr><td width='20%'></td><td>Change Status</td></tr> </table> </div>

Answer 4

我改進了比利的答案，使 div 出現onfocus並消失onblur 。 提供了兩個版本：純Js和jQuery。

 function showHideChangePopUp(m) { var disp = m === 'hide' ? 'none' : 'block'; document.getElementById('div_change_qty').style.display = disp; } function showHideChangePopUpjQ(m) { var disp = m === 'hide' ? 'none' : 'block'; $('#div_change_qty').css("display", disp); }

 #div_change_qty{display:none;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p>With pure JS</p> <input type='text' size='2' name='action_qty' onfocus='showHideChangePopUp("show")' onblur='showHideChangePopUp("hide")'> <p>With jQuery</p> <input type='text' size='2' name='action_qty' onfocus='showHideChangePopUpjQ("show")' onblur='showHideChangePopUp("hide")'> <div id='div_change_qty' name='div_change_qty' style='display:none;width:200px;height:200px;position:absolute;z-index:10;background:darkgray' > <table width='100%' height='100%'> <tr><td width='20%'></td><td>Increase</td></tr> <tr><td width='20%'></td><td>Decrease</td></tr> <tr><td width='20%'></td><td>Move Items</td></tr> <tr><td width='20%'></td><td>Change Status</td></tr> </table> </div>