 |
|
| |
| [jQuery]워터마크 텍스트박스 컨트롤 구현 |
|
|
  |
9년 전 |
<style type="text/css">
.water { color:Silver; }
</style>
<script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// 로드시 텍스트박스의 텍스트에 water 클래스 적용
$('#txtUserID').addClass("water");
// 레이블의 값을 워터마크텍스트로 가져옴
var watermakedText = $('#lblUserID').remove().text();
$('#txtUserID').val(watermakedText)
.focus(function () {
if (this.value == watermakedText) {
$(this).val(''); // 텍스트를 입력가능하도록 클리어
$('#txtUserID').removeClass("water"); // water CSS 클래스 제거
}
})
.blur(function () {
if (this.value == '') {
$(this).val(watermakedText); // 아이디를 입력하지 않으면 다시 워터마크텍스트로 지정
$('#txtUserID').addClass("water"); // water CSS 클래스 재 적용
}
});
// 전송시 값을 입력하지 않으면, 빈값으로 초기화
$('form').submit(function () {
// 텍스트박스의 값이 워터마크텍스트라면 빈값으로 처리
if ($('#txtUserID').val() == watermakedText) {
$('#txtUserID').val('');
return false; // submit 이벤트 멈춤
}
});
}); // end ready()
</script>
<form name="frm" action="WaterMarkTextBox.aspx">
<label id="lblUserID" for="txtUserID">아이디를 입력하시오.</label>
<input name="txtUserID" id="txtUserID" type="text">
<input type="submit" value="전송">
</form>
|
|
 추천 : 416 |
추천
목록
|
|
| |
|
