zoukankan      html  css  js  c++  java
  • input、select默认字体颜色

    textarea默认字颜色以及获取焦点后的字的颜色,焦点获取后使默认消失

    <textarea cols="50" rows="5" id="textarea" onfocus="if(value=='获取到元素焦点'){value='';document.getElementById('textarea').style.color='#000'}" onblur="if (value ==''){value='元素焦点消失';document.getElementById('textarea').style.color='#999'}">输入您要输入的内容</textarea>

    select默认选中项颜色为灰色,选择后变为黑色(js实现)

    <script>
    var unSelected = "#999";
    var selected = "#333";
    $(function () {
    $("select").css("color", unSelected);
    $("option").css("color", selected);
    $("select").change(function () {
    var selItem = $(this).val();
    if (selItem == $(this).find('option:first').val()) {
    $(this).css("color", unSelected);
    } else {
    $(this).css("color", selected);
    }
    });
    })

    </script>

    input有默认值,且为灰色,点击后默认值消失,输入值变为黑色

    <script type="text/javascript">

    $(function() {
        //集体调用类型为text的input
        $(".form input[text]").each(function(){
            $(this).setDefauleValue();
        });
        //单个调用
        $("#key").setDefauleValue();
    })
     
    //设置默认值
    $.fn.setDefauleValue = function() {
        var defauleValue = $(this).val();
        $(this).val(defauleValue).css("color","#eee");
     
        return this.each(function() {      
            $(this).focus(function() {
                if ($(this).val() == defauleValue) {
                    $(this).val("").css("color","#000");//输入值的颜色
                }
            }).blur(function() {
                if ($(this).val() == "") {
                    $(this).val(defauleValue).css("color","#999");//默认值的颜色
                }
            });
        });
    }
    </script>
    </head>
     
    <body>
    <form class="form">
      <input type="text" size="30" value="输入账户">
      <br>
      <input type="text" size="30" value="输入密码">
    </form>
    <br>
    <br>
    <br>
    <input type="text" size="30" id="key" value="输入手机号">
  • 相关阅读:
    带轮播图、导航栏、商品的简单html,以及轮播图下边数字随轮播图的改变而改变
    设计table表格,用js设计偶数行和奇数行显示不同的颜色
    用js实现九九乘法口诀两种方式
    [FW]修复ubutnu12.04+win7的grub2引导
    How to compile Linux kernel in fedora 6
    [Fw]初探linux中断系统(2)
    [Fw]初探linux中断系统(1)
    Regular Expression 範例
    [fw]IDT表的初始化
    [Fw]中断的初始化
  • 原文地址:https://www.cnblogs.com/crizygo/p/5196240.html
Copyright © 2011-2022 走看看