码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-07-12 06:52:11      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:

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

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

    01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    02 <html xmlns="http://www.w3.org/1999/xhtml">
    03 <head>
    04 <meta http-equiv="Content-Type" content="textml; charset=utf-8" />
    05 <title>输入框点击时边框变色效果</title>
    06 </head>
    07 <body>
    08 <script type="text/javascript">
    09 // focusClass : 获取焦点时的样式
    10 // normalClass : 正常状态下的样式
    11 function focusInput(focusClass, normalClass) {
    12     var elements = document.getElementsByTagName("input");
    13     for (var i=0; i < elements.length; i++) {
    14         if (elements[i].type != "button" && elements[i].type != "submit" && elements[i].type != "reset") {
    15             elements[i].onfocus function() { this.className focusClass; };
    16             elements[i].onblur function() { this.className normalClass||‘‘; };
    17         }
    18     }
    19 }
    20 </script>
    21 <script type="text/javascript">
    22 window.onload = function () {
    23     focusInput(‘focusInput‘, ‘normalInput‘);
    24 }
    25 </script>
    26 请输入姓名:<input type="text" class="normalInput" />
    27 <style type="text/css">
    28 .normalInput {border:1px solid #ccc;}
    29 .focusInput {border:1px solid #FFD42C;}
    30 </style>
    31 </body>
    32 </html>

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

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

标签:

原文地址:http://www.cnblogs.com/lizonghai/p/4639775.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!