jQuery IE 버전에 Placeholder 적용하기
jQuery 2012. 6. 26. 16:50<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>알찬돌삐</title>
<style type="text/css">
label.absolute {
position: absolute;
color:#999;
display: none;
cursor: text
}
input.focusbox {
border:1px solid #23adb2;
}
input:focus {
outline: #23adb2 solid thin
}
input { padding:4px 1px 3px 5px; border-top:1px solid #b5b5b5; border-right:1px solid #ddd; border-bottom:1px solid #ddd; border-left:1px solid #b5b5b5; }
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.7.1");
</script>
</head>
<body>
<input type="text" name="test" placeholder="아이디" style="width:120px" value="">
<br>
<input type="password" name="password" placeholder="비밀번호" style="width:120px" value="">
<script type="text/javascript">
jQuery(function () {
if (!("placeholder" in document.createElement("input"))) {
jQuery(":input[placeholder]").each(function () {
var $this = jQuery(this);
var pos = $this.offset();
if (!this.id) this.id = "jQueryVirtual_" + this.name;
if (this.id) {
if (jQuery.browser.version < 8) {
$this.after("<label for='" + this.id + "' id='jQueryVirtual_label_" + this.id + "' class='absolute'>" + $this.attr("placeholder") + "</label>");
$("#jQueryVirtual_label_" + this.id).css({"left":(pos.left+5), "margin-top":3, "width":$this.width()});
}
else {
$this.after("<label for='" + this.id + "' id='jQueryVirtual_label_" + this.id + "' style='left:" + (pos.left+5) + "px;margin-top:2px' class='absolute'>" + $this.attr("placeholder") + "</label>");
}
}
}).focus(function () {
var $this = jQuery(this);
$this.addClass("focusbox");
jQuery("#jQueryVirtual_label_" + $this.attr("id")).hide();
}).blur(function () {
var $this = jQuery(this);
$this.removeClass("focusbox");
if(!jQuery.trim($this.val())) jQuery("#jQueryVirtual_label_" + $this.attr("id")).show();
else jQuery("#jQueryVirtual_label_" + $this.attr("id")).hide();
}).trigger("blur");
}
});
</script>
</body>
</html>
'jQuery' 카테고리의 다른 글
| 마우스오버 아웃 (0) | 2012.07.10 |
|---|---|
| 웹접근성에 맞는 탭메뉴 (0) | 2012.07.02 |
| 폼 요소 선택자 (0) | 2012.03.13 |
| 각종 예제 사이트 (0) | 2011.07.11 |
| JQuery mobile (0) | 2011.07.07 |