通过js修改input、select默认字体颜色
未知 网络 2017-04-29 1642
这篇文章主要介绍了通过js修改input、select默认字体颜色,需要的朋友可以参考下
textarea默认字颜色以及获取焦点后的字的颜色，焦点获取后使默认消失
1 | <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实现）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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有默认值，且为灰色，点击后默认值消失，输入值变为黑色
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <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="输入手机号"> |
