提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

文本框(input)获取焦点(onfocus)时样式改变的示例代码

代码 获取 示例 改变 样式 input 文本框 焦点
2023-06-13 09:15:15 时间

摘要：许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果。其实很简单，我们只需要获取页面上的文本框，加上onfocus事件或者其他对应的事件即可。本文介绍了如何在获取焦点时切换样式，明白原理后，实现其他效果就很简单了。

许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果。其实很简单，我们只需要获取页面上的文本框，加上onfocus事件或者其他对应的事件即可。本文介绍了如何在获取焦点时切换样式，明白原理后，实现其他效果就很简单了。

复制代码代码如下:

 functionfocusInput(focusClass,normalClass){
          varelements=document.getElementsByTagName("input");
             for(vari=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");
       }


复制代码代码如下:

<styletype="text/css">
.normalInput{border:1pxsolid#ccc;}
.focusInput{   border:1pxsolid#FFD42C;}
</style>

相关文章