onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后，产生该文件
Onchange:当文字值改变时，产生该事件
Onselect:当文字加亮后，产生该文件
<input type="text" value="a" >点击时文字消失，失去焦点时文字再出现
使文本框获得焦点,并改单击文本框后,改变背景颜色代码: CSS样式: fileldset{ width:350px; }
.textInput,textarea{ width:200px; font-family:arial; background-color:#ffffff; border:1px solid #000; }
.inputHiglighted{ width:200px; background-color:#FFCE31; color:#000; border:1px solid #000; }
JS语句: var currentlyActiveInputRef=false; var currentlyActiveInputClassName=false;
function higlightActiveInput(){ if(currentlyActiveInputRef) { currentlyActiveInputRef.className=currentlyActiveInputClassName; } currentlyActiveInputClassName=this.className; this.className='inputHighlighted'; currentlyActiveInputRef=this; }
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].οnfοcus=highlightActiveInput; inputs[no].οnblur=blurActiveInput; } } } }
<script type="text/javascript" src="highlight-active-input.js"></script>
<form method="post" action="#"> <fieldset> <legend>Highlight active input</legend> <table> <tr> <td><label for="name">Name:</label></td> <td><input class="textInput" type="text" name="name" id="name"></td> </tr> <tr> <td><label for="email>E-mail:</label></td> <td><input class="textInput" type="text" name="email" id="email"></td> </tr> <tr> <td><label for="comment">Comments:</label></td> <td><textarea id="comment" name="comment" rows="3"></textarea></td> </tr> <tr> <td colspan="2"> <input type="submit" οnclick="return false" value="Submit"> </td> </tr> </table> </fieldset> </form>
此脚本放在网页的底部 <script type="text/javascript"> <!-- initInputHighlightScript(); //--> </script>
