我是靠谱客的博主 醉熏高跟鞋,这篇文章主要介绍文本框(input)获取焦点(onfocus)时样式改变的示例代码,现在分享给大家,希望可以做个参考。

摘要:许多重视用户体验的设计师都希望给文本框(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>

最后

以上就是醉熏高跟鞋最近收集整理的关于文本框(input)获取焦点(onfocus)时样式改变的示例代码的全部内容,更多相关文本框(input)获取焦点(onfocus)时样式改变内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(140)

评论列表共有 0 条评论

立即
投稿
返回
顶部