Sample Code for style change when the text box (input) gets the focus (onfocus)

Abstract: many designers who focus on user experience want to add the style switching effect when getting focus or hovering over the text box (input. In fact, it is very simple. We only need to get the text box on the page, and add the onfocus event or other corresponding events. This article describes how to change the style when getting the focus. After understanding the principle, it is easy to implement other effects.

Many designers who focus on user experience want to add the style switching effect when getting focus or hovering over the text box (input. In fact, it is very simple. We only need to get the text box on the page, and add the onfocus event or other corresponding events. This article describes how to change the style when getting the focus. After understanding the principle, it is easy to implement other effects.
Copy codeThe Code is as follows:
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 "){
// If (elements [I]. type = "text "){
Elements [I]. onfocus = function () {this. className = focusClass ;};
Elements [I]. onblur = function () {this. className = normalClass | '';};
}
}
}

Window. onload = function (){
FocusInput ('focusinput', 'normalinput ');
}

Copy codeThe Code is as follows:
<Style type = "text/css">
. NormalInput {border: 1px solid # ccc ;}
. FocusInput {border: 1px solid # FFD42C ;}
</Style>