Question

我正在尝试在文本表单字段上叠加文本。当焦点事件发生时，文本应显示在文本框上（有幻觉），并保持在那里，直到用户实际键入一个字母。在焦点发生之前，已经存在默认文本。

有一个类似/更简单的变化，其中框以默认值开始，默认值在焦点上消失，但这不是我在这种情况下要做的。

我遇到的问题是帮助文本在插入后会出现在正确的位置，特别是动态设置顶部和左侧css属性。

我的onFocus功能：

TrueThis.OldValue = $('#MyField').val(); // Save the current value
$('#MyField').val(''); // Empty the text box

var OverlayHTML = '<div>This is helper text that goes on top.</div>'


// Insert the Overlay and position the top and left to match the parent
// PROBLEM:: The element is inserted, but is not positioned.
// No top and left css attributes were assigned according to Firebug.

$('#MyField').after(OverlayHTML).css({
   'top':$('#MyField').position.top,
   'left':$('#MyField').position.left
});

// Remove the overlay when a user starts typing.
$('#MyField').next().keyup(function(){this.remove();});

我认为问题是我无法获取新元素，或者可能在DOM中不存在它，直到整个函数完成？

Answer 1

可能还有其他问题，但我注意到的第一件事是您没有调用position方法：

$('#MyField').after(OverlayHTML).css({
   //Notice calls to position method. Returns object with top and left properties
   'top':$('#MyField').position().top,
   'left':$('#MyField').position().left
});

修改

还有另一个明显的问题。您正在尝试将CSS更改应用于#MyField，而不是新元素。最简单的解决方案可能是在将新的元素附加到DOM之前将其应用于新元素：

var OverlayHTML = $('<div>This is helper text that goes on top.</div>').css({ //Set CSS properties here });

Answer 2

除了James的建议，要使keyup函数工作，我认为你需要将它绑定到实际的文本输入，并使用回调内的.next（）函数删除覆盖。

// Remove the overlay when a user starts typing.
$('#MyField').keyup(function(){$(this).next().remove();});

对于叠加层的位置，它取决于父项的文本输入。假设您在输入周围有一个相对定位的div：

<div class="positionRelative">
<input type="text" id="MyField" val=""/>
</div>

父div创建一个新的坐标系，因此您可以将叠加设置为绝对定位：

var OverlayHTML = $('<div>This is helper text that goes on top.</div>').css({
    'position': 'absolute',
    'top': 0,
    'left': 0
    });

使用JQuery动态表单字段覆盖

2 个答案: