Наложение динамического поля формы с помощью JQuery

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

Наряду с предложениями от Джеймса, для функции 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> 

Родитель ДИВ создает новую систему координат, так что вы можете установить накладку на абсолютное позиционирование:

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

Answer 2

Там могут быть и другие проблемы, но первое, что я замечаю, что вы не вызывая метод 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, а не к новому элементу. Самым простым решением является, вероятно, применить CSS к новому элементу, прежде чем добавить его в DOM:

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