通过javascript在输入框下方弹出一个div

我有一个输入框：

<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函数以执行所需任务。

使用JQuery

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

使用JQuery

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

喜欢这个吗

函数showHideChangePopUp{ document.getElementById'div_change_qty'.style.display='block'？'block'：'none'； } div_change_数量{显示：无；} 增长 减少 移动项目 改变状态 喜欢这个吗

函数showHideChangePopUp{ document.getElementById'div_change_qty'.style.display='block'？'block'：'none'； } div_change_数量{显示：无；} 增长 减少 移动项目 改变状态

---

我改进了比利的答案，使div出现在焦点上，消失在模糊上。提供了两个版本：纯Js和jQuery

函数showHideChangePopUpm{ var disp=m==‘隐藏’？‘无’：‘块’； document.getElementById'div\u change\u qty'.style.display=disp； } 函数showHideChangePopUpjQm{ var disp=m==‘隐藏’？‘无’：‘块’； $'div\u change\u qty'.css显示，显示； } div_change_数量{显示：无；} 用纯JS

使用jQuery

增长 减少 移动项目 改变状态

---

我改进了比利的答案，使div出现在焦点上，消失在模糊上。提供了两个版本：纯Js和jQuery

函数showHideChangePopUpm{ var disp=m==‘隐藏’？‘无’：‘块’； document.getElementById'div\u change\u qty'.style.display=disp； } 函数showHideChangePopUpjQm{ var disp=m==‘隐藏’？‘无’：‘块’； $'div\u change\u qty'.css显示，显示； } div_change_数量{显示：无；} 用纯JS

使用jQuery

增长 减少 移动项目 改变状态

---

我们都误解了你原来的帖子是如何显示或隐藏div的

下面是使用输入元素的名称将div直接放在输入框下方的代码：

函数showHideChangePopUpe{ var div=document.querySelector'div\u change\u qty'； var inp=文件查询选择器“操作数量”； var rect=inp.getClientRects； display='block'； div.style.left=rect[0]。left+'px'； div.style.top=rect[0]。bottom+'px'； } 增长 减少 移动项目 改变状态

---

我们都误解了你原来的帖子是如何显示或隐藏div的

下面是使用输入元素的名称将div直接放在输入框下方的代码：

函数showHideChangePopUpe{ var div=document.querySelector'div\u change\u qty'； var inp=文件查询选择器“操作数量”； var rect=inp.getClientRects； display='block'； div.style.left=rect[0]。left+'px'； div.style.top=rect[0]。bottom+'px'； } 增长 减少 移动项目 改变状态

---

javascript还是jquery？你能发布你现在拥有的javascript吗？showHideChangePopUp方法我的问题实际上是将其放置在输入框的正下方，即动态地，我们应该找到特定输入框的位置，并将div放置在其正下方。大多数答案都给出了隐藏和显示div的答案，这不是问题。javascript或jquery？你能发布你现在拥有的javascript吗？showHideChangePopUp方法我的问题实际上是将其放置在输入框的正下方，即动态地，我们应该找到特定输入框的位置，并将div放置在其正下方。大多数答案都给出了隐藏和显示div的答案，这不是问题。