как получить координаты x и y непосредственно под левой нижней стороной прямоугольника ввода?

Question

Я думаю о реализации пользовательской функции автозаполнения, поэтому в основном моя идея сейчас состоит в том, чтобы я сделал div-позиционированный abs и задаю ему позицию здесь:

(изображение) http://i.stack.imgur.com/3c5BH.gif

Так что мой вопрос с переменной, ссылающейся на текстовое поле, как мне получить координаты x и y непосредственно под левой нижней стороной прямоугольника ввода?

Мой скрипт должен работать в последних версиях IE/ FF / Safari / Opera / Chrome

Я знаю, что могу использовать для этого библиотеку, но нет, мне интересно узнать, как они это делают (или, может быть, лучше)?

Answer 1

Этот вопрос намного сложнее, чем кажется, и включает определение положения элемента относительно документа.Код для этого можно извлечь из источника jquery (http://code.jquery.com/jquery-1.6.1.js - поиск "jQuery.fn.offset")

в jQuery:

var node = $('#textbox'),
     pos = box.offset(); // the complicated piece I'm using jQuery for

node.top  += node.height(); // node.offsetHeight without jQuery
node.left += node.width();  // node.offsetWidth without jQuery

Ответ может быть чрезвычайно упрощен, если вас не волнует FF2 или Safari3:

var   box = document.getElementById('yourTextBox').getBoundingClientRect(),
     left = box.left,
   bottom = box.bottom;

Answer 2

Хорошие комментарии!Для моего сценария всегда есть смещение родителя (именно поэтому я использую позицию - http://api.jquery.com/position/).. В надежде, что это может помочь кому-то еще, желающему быстро исправить, вот код:

// I have a parent item (item) and a div (detail) 
// that pops up at the bottom left corner of the parent:
var jItem = $(item);
var pos = jItem.position();
var marginTop = parseInt(jItem.css('margin-top'));
if (isNaN(marginTop)) {
    marginTop = 0;
} 
$(detail).css("top", pos.top + jItem.outerHeight() + marginTop)
    .css("left", pos.left);
$(detail).show();

Answer 3

Просто дайте коробке определенную ширину и высоту. Затем получите его свойство top и left и добавьте его с шириной и высотой. Просто. Я дам тебе Pseodocode.

<STYLE>
object{width: 100px; height: 20px;}
</STYLE>

<SCRIPT>
x = object.left;
y = object.top;
x = x + object.width;
y = y + object.height;
</SCRIPT>

Answer 4

• x = x смещение
• y = y смещение - (высота текстового поля + верхний отступ + нижний отступ)