Question

我有一个带有建议框的文本输入，当输入内容时，该建议框会显示在输入下方。问题是当页面被缩放时，有时框会出现在稍微不同的位置（1-3个像素）。有没有办法保证，无论页面比例是多少，建议框总是保持正好0px左边和0px相对于输入字段的底线？感谢。

tBox = $('#textBox')[0];

$('#suggestionBox').css({
    width: "151px",
    border: "1px solid grey",
    position: "absolute",
    top: (tBox.offsetTop + tBox.offsetHeight) + "px",
    left: tBox.offsetLeft + "px"
});

<input type="text" id="textBox" />
<div id="suggestionBox" style="display:none;">suggesion</div>

Answer 1

您是否尝试过使用此http://docs.jquery.com/UI/API/1.8/Position？

http://jsfiddle.net/ZpFm9/1/

$("#suggestionBox").position({
    my: "left top",
    at: "left bottom",
    of: $('#textBox')
});

Answer 2

请参阅简单示例：http://jsfiddle.net/JQeTT/

$('#suggestionBox').css({
   width: "151px",
   border: "1px solid grey",
   position: "absolute",
   top: ($('#textBox').offsetTop + $('#textBox').offsetHeight) + "px",
   left: $('#textBox').offsetLeft + "px"
});

$('#textBox').focus(function(){

   $("#suggestionBox").show();
}).blur(function(){ //if lost the focus, the suggestion box hide again
   $("#suggestionBox").hide();
});

始终直接在文本框下保留建议框

2 个答案: