javascript - 通过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。

下面是使用 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>