Home > Web Front-end > JS Tutorial > Sample code for style change when text box (input) gets focus (onfocus)_javascript skills

Sample code for style change when text box (input) gets focus (onfocus)_javascript skills

WBOY
Release: 2016-05-16 17:04:29
Original
1342 people have browsed it

Abstract: Many designers who value user experience hope to add style switching effects to text boxes (inputs) when they gain focus or mouseover. It's actually very simple. We only need to get the text box on the page and add the onfocus event or other corresponding events. This article introduces how to switch styles when focusing. Once you understand the principle, it is very simple to achieve other effects.

Many designers who value user experience hope to add style switching effects to text boxes (inputs) when they gain focus or mouseover. It's actually very simple. We only need to get the text box on the page and add the onfocus event or other corresponding events. This article introduces how to switch styles when focusing. Once you understand the principle, it is very simple to achieve other effects.

Copy code The code is as follows:

function focusInput(focusClass, normalClass) {
     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]. .onfocus = function() { this.className = focusClass; };
                                                                                . 🎜> }

                                                                                                                                                         Copy the code

The code is as follows:



Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template