JavaScript

超轻量级php框架startmvc

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

更新时间:2020-05-07 12:18:01 作者:startmvc
textarea默认字颜色以及获取焦点后的字的颜色,焦点获取后使默认消失<textareacols="50"rows="5

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 默认字体颜色