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

程序员文章站 2022-04-29 12:46:11

textarea默认字颜色以及获取焦点后的字的颜色，焦点获取后使默认消失

<p>textarea默认字颜色以及获取焦点后的字的颜色，焦点获取后使默认消失</p>
<div class="jb51code">
<pre class="brush: javascript;">
<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>
</pre>
</div>
<p>select默认选中项颜色为灰色，选择后变为黑色（js实现）</p>
<div class="jb51code">
<pre class="brush: javascript;">
<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></pre>
</div>
<p>input有默认值，且为灰色，点击后默认值消失，输入值变为黑色</p>
<div class="jb51code">
<pre class="brush: javascript;">
<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="输入手机号"></pre>
</div>
<p>

</p>					</div>
																				<div class="info-pre-next">
						<p>
							上一篇：							<a href="/article/785479.html">
								asp.net gridview 72般绝技第1/2页							</a>
						</p>
						<p>
							下一篇：							<a href="/article/785481.html">
								夏日炎炎热成狗，总爱拉稀是啥原因？							</a>
						</p>
					</div>
															<div class="wz_tuijian">
						<p>
							推荐阅读						</p>
						<ul>
														<li>
								<a href="/article/1661209.html" target="_blank" title="通过js修改input、select默认字体颜色">
									<h2>
										通过js修改input、select默认字体颜色									</h2>
								</a>
							</li>
														<li>
								<a href="/article/785480.html" target="_blank" title="通过js修改input、select默认字体颜色">
									<h2>
										通过js修改input、select默认字体颜色									</h2>
								</a>
							</li>
														<li>
								<a href="/article/354354.html" target="_blank" title="Js修改select下拉框及option默认颜色">
									<h2>
										Js修改select下拉框及option默认颜色									</h2>
								</a>
							</li>
													</ul>
					</div>
									</article>
			</div>
            			
		</main>
		<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer>	</body>
	</html>