The method of JavaScript implementation for input and textarea custom Hover,focus effect _javascript skill

This article illustrates the method that JavaScript realizes the custom Hover,focus effect for input and textarea. Share to everyone for your reference. Specifically as follows:

Here demo JavaScript for input box and textarea text box custom Hover,focus effect, hover is the mouse put up after the effect, focus is the mouse focal point, to achieve this effect, need JS to cooperate, this example is very good , it adds both mouse hover and mouse focus effects to the input boxes and text boxes on the Web page.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-input-textarea-hover-focus-style-codes/

The specific code is as follows:

<title>javascript Input/textarea Custom Hover,focus effects </title> <script type= "Text/javascript" > function suckerfish (type, tag, parentid) {if (window.attachevent) {window.attachevent ("onload", function () {var Sfel s = (parentid==null) document.getelementsbytagname (tag):d Ocument.getelementbyid (ParentID). getElementsByTagName ( 
TAG); 
Type (sfels); 
}); } sfhover = function (sfels) {for (Var i=0 i < sfels.length; i++) {sfels[i].onmouseover=function () {This.clas 
sname+= "Ipthover"; 
} sfels[i].onmouseout=function () {This.classname=this.classname.replace (New RegExp ("ipthover\\b"), ""); }} sffocus = function (sfels) {for (Var i=0 i < sfels.length; i++) {sfels[i].onfocus=function () {This.class 
name+= "Iptfocus"; 
} sfels[i].onblur=function () {This.classname=this.classname.replace (New RegExp ("iptfocus\\b"), "");
 }} </script> <style type= "Text/css" > textarea{border:1px solid #BBE1F1; width:250px; height:80px;} . ipthover,input: hover,textarea:hover{border:1px solid #77C2E3; iptfocus,input:focus,textarea:focus{border:1px solid #77C2E3;
Background-color: #EFF7FF; } </style> <input type= "text" name= "TextField"/><br/> <textarea name= "textarea" ></
textarea> <script type= "Text/javascript" > Suckerfish (sfhover, "input");
Suckerfish (Sffocus, "input");
Suckerfish (Sfhover, "textarea");
Suckerfish (Sffocus, "textarea");

 </script>

The

wants this article to help you with your JavaScript programming.