Question

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

如何实现这一目标？

Answer 1

要计算元素与div顶部的距离（滚动后），您需要使用div的scrollTop属性和input元素的offsetTop属性。假设您有对这些元素的引用，您可以进行如下计算：

var currentPosition = inputElement.offsetTop - divElement.scrollTop;

Answer 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中较高元素的距离，则需要遍历所有可用的父项并总结它们的偏移量。

希望这有帮助！：）

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

获取div滚动内输入的高度 - javascript

3 个答案: