文本框获取焦点时样式更改的示例代码

发布时间：2023-09-18 14:52:36 所属栏目：教程来源：

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

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!