입력폼에 포커스가 이동하면 배경색이 하이라이트 됩니다
페이지 정보
작성자 서방님 댓글 0건 조회 188회 작성일 07-08-11 16:37본문
<html>
<head>
<title>http://www.blueb.co.kr</title>
<style type="text/css">
.textInput,textarea{ /* General style for my inputs when they're not highlighted */
width:300px;
font-family:arial;
background-color:#FFFFFF;
border:1px solid #000;
}
.inputHighlighted{ /* Highlighting style */
background-color:#FF9900;
color:#FFF;
width:300px;
border:1px solid #000;
}
</style>
<script type="text/javascript">
var currentlyActiveInputRef = false;
var currentlyActiveInputClassName = false;
function highlightActiveInput()
{
if(currentlyActiveInputRef){
currentlyActiveInputRef.className = currentlyActiveInputClassName;
}
currentlyActiveInputClassName = this.className;
this.className = 'inputHighlighted';
currentlyActiveInputRef = this;
}
function blurActiveInput()
{
this.className = currentlyActiveInputClassName;
}
function initInputHighlightScript()
{
var tags = ['INPUT','TEXTAREA'];
for(tagCounter=0;tagCounter<tags.length;tagCounter++){
var inputs = document.getElementsByTagName(tags[tagCounter]);
for(var no=0;no<inputs.length;no++){
if(inputs[no].className && inputs[no].className=='doNotHighlightThisInput')continue;
if(inputs[no].tagName.toLowerCase()=='textarea' || (inputs[no].tagName.toLowerCase()=='input' && inputs[no].type.toLowerCase()=='text')){
inputs[no].onfocus = highlightActiveInput;
inputs[no].onblur = blurActiveInput;
}
}
}
}
</script>
</head>
<body>
<form method="post" action="#">
<table>
<tr>
<td><label for="firstname">First name</label></td>
<td><input class="textInput" type="text" name="firstname" id="firstname"></td>
</tr>
<tr>
<td><label for="firstname">Last name</label></td>
<td><input class="textInput" type="text" name="lastname" id="lastname"></td>
</tr>
<tr>
<td><label for="address">Address</label></td>
<td><textarea id="address" name="address" rows="3"></textarea></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" onclick="return false" value="Submit">
</td>
</tr>
</table>
</form>
<script type="text/javascript">
initInputHighlightScript();
</script>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
