1

ページにテキストフィールドがあります:

<input type='text' />

何かを入力するとdivが下に表示されるというロジックがあります。(div は、アイデアを提供するためのコンボのポップアップのようなものです)

問題は、テキストフィールドがページの下部にある場合、テキストフィールドの上部に div を表示したいということです。

これを達成する簡単な方法はありますか?

これを表現する別の方法は次のとおりです。

別の HTML 要素の下部に div を追加すると、現在のページに収まらないかどうかはどうすればわかりますか?

4

2 に答える 2

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:ブラウザー間の互換性についてはテストしていません。同じためにマルチブラウザコードが必要になる場合があります。それ以外は、ほとんどすべてのブラウザーで機能します。

于 2013-03-28T13:50:38.447 に答える
-1

ここhttp://jqueryui.com/tooltip/をご覧ください。あなたが説明したことから、ツールチップが必要だと思います。このライブラリは、div を自動的に配置します。

于 2013-03-28T14:20:59.497 に答える