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>

Answer 2

使用jquery

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

Answer 3

Likt this？

＆＃13;

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

＆＃13;

#div_change_qty{display:none;}

＆＃13;

<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>

＆＃13;

Answer 4

我改进了比利的答案，以便div出现onfocus并消失onblur。提供了两个版本：纯Js和jQuery。

＆＃13;

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);
}

＆＃13;

#div_change_qty{display:none;}

＆＃13;

<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>

＆＃13;

通过javascript在输入框的正下方放置一个div

4 个答案: