您的位置：首页 > Web前端 > CSS

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

2018-10-12 14:05 579 查看

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

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


 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');
        }


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

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航