文本框(input)获取焦点(onfocus)时样式改变的示例代码
更新时间：2014年01月10日 09:28:52 作者：
本篇文章主要是对文本框(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>
相关文章
查找数据有2种方式，顺序查找和二分查找。顺序查找适用于元素随机排列的列表。二分查找适用于元素已排序的列表。二分查找效率更高，但是必须是已经排好序的列表元素集合2015-04-04
这篇文章主要为大家详细介绍了JavaScript实现移动端轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
js类型转换与引用类型详解(Boolean_Number_String)
本篇文章主要是对js中的类型转换与引用类型(Boolean_Number_String)进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
这篇文章主要介绍了JS锚点的设置与使用方法,涉及javascript针对页面元素属性的简单动态操作技巧,需要的朋友可以参考下2016-09-09
本文主要讲诉了使用js实现网站功能兼容IE6，非常的实用的小技巧，有需要的朋友可以参考下2014-09-09
这篇文章主要介绍了JS 将伪数组转换成数组，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
列举所有的方式，看看各浏览器的支持差异。方便用js动态设置元素css的代码。需要的朋友可以参考下。2011-08-08
想象一个场景，就是如何根据一张图片大概提取出它的主色调呢？获取主色调后，可能会用来设置某些背景颜色，这里，利用 JS 简单获取本地图片主色调，希望对大家有所帮助2023-03-03
使用requestAnimationFrame实现精准倒计时功能
实现精准倒计时对于活动预告、限时优惠和赛事计时等场景非常重要,常用的倒计时方法包括使用JavaScript的setInterval和setTimeout,但这些方法精度有限,为提高精度,本文介绍使用requestAnimationFrame实现精准倒计时功能,感兴趣的朋友一起看看吧2024-09-09
这篇文章主要介绍了微信小程序分享小程序码的生成（带参数）以及参数的获取，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
最新评论