| code is as follows |
copy code |
| <script type= "Text/javascript" >
Description: Implementation of Style changes when text box (input) gets focus (onfocus)
Focusclass: style when getting focus
Normalclass: The style in the normal state
function Focusinput (Focusclass, Normalclass) {
var elements = document.getelementsbytagname ("input");
for (Var i=0 i < elements.length; i++) {
if (elements[i].type!= "button" && elements[i].type!= "Submit" && elements[i].type!= "reset") {
Elements[i].onfocus = function () {this.classname = Focusclass;};
Elements[i].onblur = function () {this.classname = normalclass| | ';};
}
}
}
</script> |
HTML code
| The code is as follows |
Copy Code |
<style type= "Text/css" >
. normalinput {
border:1px solid #ccc;
}
. focusinput {
border:1px solid #FFD42C;
}
</style>
<script type= "Text/javascript" >
Window.onload = function () {
Focusinput (' focusinput ', ' normalinput ');
}
</script>
Text box: <input type= "text" class= "Normalinput"/> |
All right, look at the whole case.
| The code is as follows |
Copy Code |
| <div class= "Demo-container" >
<!--************************************* instance code started *************************************-->
<style type= "Text/css" >
. normalinput {
border:1px solid #ccc;
}
. focusinput {
border:1px solid #FFD42C;
}
</style> <script type= "Text/javascript"
<!--
Function focusinput (Focusclass, Normalclass) {
var elements = document.getElementsByTagName ("input");
for (var i=0 i < elements.length; i++) {
if (el Ements[i].type!= "button" && elements[i].type!= "Submit" && elements[i].type!= "reset") {
&nb sp; Elements[i].onfocus = function () {this.className = Focusclass; };
Elements[i].onblur = function () { This.classname = normalclass| | '; };
}
}
}
Window.onload = function () {
focusinput (' focusinput ', ' normalinput ');
}
//-->
</script> <br/>
Text box: <input type= "text" class= "Normalinput"/>
<br/><br/> <!--************************************* instance code end *************************************-->
</div>
|
