获取div滚动中输入的高度 - javascript答案

【问题标题】：Get height of the input inside div scroll - javascript获取div滚动中输入的高度 - javascript
【发布时间】：2017-09-01 03:54:19
【问题描述】：

我在 div 溢出滚动中有输入。 JSFIDDLE

当我点击tab 时，我应该能够获得该输入的高度。

第一个输入：高度10px； - 点击标签

第二次输入：高度20px；

我有activeElement的属性

nextInput   {...}   [Object, HTMLInputElement]
[Methods]   {...}   er
clientTop   2   Number
clientWidth 562 Number
COMMENT_NODE    8   Number
complete    false   Boolean         
ng339   742 Number
nodeName    "INPUT" String
scrollHeight    46  Number
scrollLeft  0   Number
scrollTop   0   Number
scrollWidth 562 Number
selectionEnd    0   Number
selectionStart  0   Number
size    20  Number      
willValidate    false   Boolean

如何做到这一点？

【问题讨论】：

标签： javascript scroll overflow scrolltop

【解决方案1】：

要计算元素到div顶部的距离（滚动后），需要使用div的scrollTop属性和输入元素的offsetTop属性。假设您引用了这些元素，您可以像这样进行计算：

var currentPosition = inputElement.offsetTop - divElement.scrollTop;

【讨论】：

【解决方案2】：

为了计算每个元素与其父元素顶部的距离，您正在寻找.offsetTop。

在以下示例中，我通过循环 getElementsByTagName() 来做到这一点：

var elements = document.getElementsByTagName('input');
for (var i = 0; i < elements.length; i++) {
  elements[i].onclick = function() {
    console.log(this.offsetTop);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="max-height:80px;overflow:auto;width:210px;">
  <input type="text" style="height:10px">
  <input type="text" style="height:20px">
  <input type="text" style="height:30px">
  <input type="text" style="height:20px">
</div>

请注意，.offsetTop 仅适用于直接父级。如果您想计算与 DOM 中更高元素的距离，则需要遍历所有可用的父元素并求和它们的偏移量。

希望这会有所帮助！ :)

【讨论】：

不！我想从 div 的顶部找到焦点输入的高度。假设焦点在第一个输入，我应该得到的高度是 10px.. 如果焦点在第三个输入，高度应该是 30px..
@Matarishvan -- 我很抱歉；我现在明白你的意思了。我已经更新了我的答案以涵盖这一点:)

【解决方案3】：

我得到了解决方案@Matarishvan

这是我的代码，您只需要使用焦点事件并获取该元素的高度

<div >
   <form>
      <input type="text" placeholder="first input"></input>
      <input id="secondtext" type="text" placeholder="second text"></input>
   </form>
</div>

<script>

$(document).ready(function () {
    $("input").hover(function(){
      var val = $(this).height();
      console.log(val);
    });
})
</script>

【讨论】：