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

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 # 默认字体颜色 # JS获取及设置TextArea或input文本框选择文本位置的方法 # js动态修改input输入框的type属性(实现方法解析) # js修改input的type属性问题探讨 # js修改input的type属性及浏览器兼容问题探讨与解决 # JS双击变input框批量修改内容 # js限制文本框只能输入数字方法小结 # JS判断文本框内容改变事件的简单实例 # 捕获input文本框内容改变事件的js代码 # JS简单获取并修改input文本框内容的方法示例 # 默认值 # 您要 # 输入密码 # onblur # style # color # var # unSelected # selected # gt # script # brush # js # lt # textarea # pre # class # cols # onfocus

返回目录在线咨询

上一篇：房产网安全防护：防止数据泄露和黑客攻击的最佳实践有哪些？
下一篇：php转mp4怎么压缩大小_减小php转换后mp4体积的技巧【技巧】

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求