⽂本框（input）获取焦点（onfocus）时样式改变的实现⽅法
input绑定onblur事件摘要: 许多重视⽤户体验的设计师都希望给⽂本框(input)加上获取焦点或者⿏标悬停时的样式切换效果。其实很简单，我们只需要获取页⾯上的⽂本框，加上onfocus事件或者其他对应的事件即可。本⽂介绍了如何在获取焦点时切换样式，明⽩原理后，实现其他效果就很简单了。
许多重视⽤户体验的设计师都希望给⽂本框(input)加上获取焦点或者⿏标悬停时的样式切换效果。其实很简单，我们只需要获取页⾯上的⽂本框，加上onfocus事件或者其他对应的事件即可。本⽂介绍了如何在获取焦点时切换样式，明⽩原理后，实现其他效果就很简单了。
代码
function focusInput(focusClass, normalClass) {
var elements = ElementsByTagName("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||''; };
}
}
}
focusInput('focusInput', 'normalInput');
}
<style type="text/css">
.normalInput { border:1px solid #ccc;}
.focusInput {    border:1px solid #FFD42C;}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。