Summary: Many designers who value the user experience want to add the focus of obtaining the focus or the style switching effect when the mouse hover. In fact, it is very simple. We only need to get the text box on the page, plus the onFocus event or other corresponding events. This article introduces how to switch styles when obtaining the focus. After understanding the principle, it is simple to achieve other effects.
Many designers who value the user experience hope to add the focus of the focus or the style switching effect when they get the focus or the mouse hover. In fact, it is very simple. We only need to get the text box on the page, plus the onFocus event or other corresponding events. This article introduces how to switch styles when obtaining the focus. After understanding the principle, it is simple to achieve other effects.
Copy code code as follows:
Function FocusInput (FocusClass, NormalClass) {
varings = 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_f (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 code code as follows:
<Style Type = "Text/CSS">
.normalinput {border: 1px solid #ccc;}
.focusInput {border: 1px solid #ffd42c;}
</style>