javascript - 输入类型文本 - 如何根据其在网页中的位置在下方或上方添加 div

Question

我的页面中有一个文本字段：

<input type='text' />

我有一些逻辑，如果输入了某些内容，则会在下面出现一个 div。（div 就像一个组合中的弹出窗口，给你一个想法）

问题是，如果文本字段位于页面底部，我宁愿 div 出现在文本字段的顶部。

有没有简单的方法来实现这一点？

另一种表达方式是：

我如何知道在另一个 HTML 元素底部添加 div 是否不适合当前页面？

Answer 1

您可以检查元素下方的可用空间并根据需要确定位置。

var popupTop = <offset-top-of-element> + element.offsetHeight;

if(window.offsetHeight - popupTop > 100) { // change 100 as needed
   // display below
}
else {
   // display above
}

为了找到元素的偏移顶部，您需要递归添加 parent.offsetTop 直到没有父级，如此答案：https ://stackoverflow.com/a/6780661/921204

注意：我没有测试window.offsetHeight跨浏览器的兼容性。您可能需要相同的多浏览器代码。除此之外，这几乎适用于所有浏览器。

Answer 2

你可以看这里http://jqueryui.com/tooltip/。根据您的描述，我猜您需要一个工具提示。这个库会自动定位你的 div。