NSViewRepresentable을 사용하여 SwiftUI 기반 앱에서 AppKit 사용하기
2024-04-06
IE8 이상의 브라우저에서 동일하게 보여지는 Placeholder 만들기
2014-03-17
Explanation
간단하게 만들어보는 플레이스홀더, IE8 에서도 동일한 효과를 줄 수 있다.
예제 링크 : https://falsy.me/preview/placeholder/placeholder.html
소스 보기
|
1 2 3 4 5 6 7 8 9 10 |
[HTML] <div class="placeholder_box"> <label for="placeholder">Placeholder Name</label> <input type="text" id="placeholder" name="placeholdername" /> </div> <div class="placeholder_box"> <label for="placeholder2">Placeholder Age</label> <input type="text" id="placeholder2" name="placeholderage" /> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
[CSS] .placeholder_box { position: relative; margin: 15px 10px; } .placeholder_box label { color: #999; position: absolute; top: 13px; left: 15px; font-size: 12px; cursor: text; } .placeholder_box input[type="text"] { border: 1px solid #ededed; height: 40px; width: 200px; padding: 13px 15px; box-sizing: border-box; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
[JAVASCRIPT] jQuery(document).ready(function(){ var placeholderTarget = $(".placeholder_box input[type=text]"); placeholderTarget.focus(function(){ $(this).siblings("label").fadeOut("fast"); }); placeholderTarget.focusout(function(){ if($(this).val() == ""){ $(this).siblings("label").fadeIn("fast"); } }); }); |
