概述
摘要：许多重视用户体验的设计师都希望给文本框(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)时样式改变的示例代码所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复