通过js修改input、select默认字体颜色

时间：2021-05-25

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章