通過js修改input、select默認(rèn)字體顏色
更新時間:2017年04月19日 22:29:46 投稿:mdxy-dxy
這篇文章主要介紹了通過js修改input、select默認(rèn)字體顏色,需要的朋友可以參考下
textarea默認(rèn)字顏色以及獲取焦點后的字的顏色,焦點獲取后使默認(rèn)消失
<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'}">輸入您要輸入的內(nèi)容</textarea>
select默認(rèn)選中項顏色為灰色,選擇后變?yōu)楹谏╦s實現(xiàn))
<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有默認(rèn)值,且為灰色,點擊后默認(rèn)值消失,輸入值變?yōu)楹谏?/p>
<script type="text/javascript"> $(function() { //集體調(diào)用類型為text的input $(".form input[text]").each(function(){ $(this).setDefauleValue(); }); //單個調(diào)用 $("#key").setDefauleValue(); }) //設(shè)置默認(rèn)值 $.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");//默認(rèn)值的顏色 } }); }); } </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="輸入手機(jī)號">
相關(guān)文章
JS實現(xiàn)樹形結(jié)構(gòu)與數(shù)組結(jié)構(gòu)相互轉(zhuǎn)換并在樹形結(jié)構(gòu)中查找對象
這篇文章介紹了JS實現(xiàn)樹形結(jié)構(gòu)與數(shù)組結(jié)構(gòu)相互轉(zhuǎn)換并在樹形結(jié)構(gòu)中查找對象的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06鼠標(biāo)點擊input,顯示瞬間的邊框顏色,對之修改與隱藏實例
下面小編就為大家?guī)硪黄髽?biāo)點擊input,顯示瞬間的邊框顏色,對之修改與隱藏實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-12-12jsp網(wǎng)頁搜索結(jié)果中實現(xiàn)選中一行使其高亮
在做搜索結(jié)果時為了好看需要將選中的行變的高亮些,下面有個不錯的示例,需要的朋友可以參考下2014-02-02PHP自動加載autoload和命名空間的應(yīng)用小結(jié)
PHP的自動加載就是我們加載實例化類的時候,不需要手動去寫require來導(dǎo)入這個class.php文件,程序自動幫我們加載導(dǎo)入進(jìn)來這.篇文章主要介紹了PHP自動加載autoload和命名空的應(yīng)用,需要的朋友可以參考下2017-12-12