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

: 가장 쉬운 해결책은 당신이 DOM에 추가하기 전에 새로운 요소에 CSS를 적용하는 아마 실제 텍스트 입력 및 콜백 내부에서 .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에 적용하려고합니다. 의 keyup 기능이 작동하려면, 당신이에 바인딩 할 필요가 있다고 생각, 제임스의 제안과 함께

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