当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

jS实现文本框在点击时变色

发表于: 2014-08-12   作者:agevs   来源:转载   浏览次数:
摘要: 网页上默认的文本框老是灰色风格,看的都有点不耐烦了,用CSS和JS改变其样式是大家都喜欢用的方法,今天写了一个点击边框变色的文本框,鼠标点击文本框将要输入的时候,文本框自动变色高亮显示,非常有视觉效果,让文本框变漂亮了许多。HTML代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

网页上默认的文本框老是灰色风格,看的都有点不耐烦了,用CSS和JS改变其样式是大家都喜欢用的方法,今天写了一个点击边框变色的文本框,鼠标点击文本框将要输入的时候,文本框自动变色高亮显示,非常有视觉效果,让文本框变漂亮了许多。HTML代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
<title>输入框点击时边框变色效果</title>
</head>
<body>
<script type="text/javascript"> 
// focusClass : 获取焦点时的样式
// normalClass : 正常状态下的样式
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") {
            elements[i].onfocus = function() { this.className = focusClass; };
            elements[i].onblur = function() { this.className = normalClass||''; };
        }
    }
}
</script>
<script type="text/javascript">
window.onload = function () {
    focusInput('focusInput', 'normalInput');
}
</script>
请输入姓名:<input type="text" class="normalInput" />
<style type="text/css">
.normalInput {border:1px solid #ccc;}
.focusInput {border:1px solid #FFD42C;}
</style>
</body>
</html>

 

在火狐下也有效,只不过火狐和chrome下,这两款浏览器默认会自动会输入框添加点击效果,所以有时候看不清,IE下表现突出。前端框架示例

jS实现文本框在点击时变色

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
我们有时做一个菜单,点击后,背景变为点击后色,效果如下: 这里只是简单介绍实现过程: 定义存放菜
如果表格的数据比较多的话,表格颜色很单一看起来很不方便,看到一些网站将每行的颜色隔行改掉,很
HTML(demo.html): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:/
1、js部分 <script type="text/javascript"> <!-- var _edit = { IN: function (obj, act,
可以触发点击事件并变色的UILabel 谁说UILabel不能够当做button处理点击事件呢?今天,笔者就像大家
  最近开发实现了那种点击增加按钮就会多出一栏的效果,但是当每栏的输入框的数量比较多的时候,
实现: 1.当鼠标移动到DataGrid的单元格时,单元格变色,并且单元格里的字体同时变色,鼠标变为手的形状
通过jQuery和CSS实现表格的特效,效果如下: 实现过程: 1.jQuery代码 <script language="JavaSc
很久没有写博客了,这两天一直忙于一个关于考试的项目,将其中的一些效果实现的经验写下来,希望给
1、TextBox限制只能输入数据 实现原理:每个键有着对应的键码,利用键码对相应的键禁用键盘事件。 &
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号