input、select默认字体颜色

时间：2016-03-01 14:21:25 阅读：231 评论：0 收藏：0 [点我收藏+]

标签：

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="输入手机号">

input、select默认字体颜色

标签：

原文地址：http://www.cnblogs.com/crizygo/p/5196240.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行