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();}); 

オーバーレイの位置は、テキスト入力の親が何であるかによって異なります。

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

：あなたは絶対位置にオーバーレイを設定することができるように

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

親のdivは新しい座標系を作成します：あなたが入力周りの比較的配置のdivを持っていると言います

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に適用しようとしています。あなたがDOMに追加し前に、最も簡単な解決策は、新しい要素にCSSを適用することが考えられます：

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