文本框内提示信息

最新推荐文章于 2018-12-05 14:18:27 发布

iteye_2479

最新推荐文章于 2018-12-05 14:18:27 发布

阅读量349

点赞数

分类专栏： Html 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_2479/article/details/82613631

版权

Html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> 
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>input test</title>  
<script type="text/javascript"
    src="jquery-1.10.2.js"></script>
<script type="text/javascript">  
function inputTipText(){    
$("input[class*=grayTips]") //所有样式名中含有grayTips的input   
.each(function(){   
   var oldVal=$(this).val();   //默认的提示性文本   
   $(this)   
   .css({"color":"#888","font-size":"14px","font-weight":"bold"})  //灰色  
   .focus(function(){   
    if($(this).val()!=oldVal){$(this).css({"color":"#000","font-weight":"normal"})}else{$(this).val("").css({"color":"#888"})}   
   })   
   .blur(function(){   
    if($(this).val()==""){$(this).val(oldVal).css({"color":"#888"})}   
   })   
   .keydown(function(){$(this).css({"color":"#000","font-weight":"normal"})})   

})   
}   

$(function(){   
inputTipText();  //直接调用就OK了   
})   
</script>  
</head>  
<body>  
<input type="text" value="输入您的用户名" class="grayTips" />  
<input type="text" value="输入您的登录密码" class="grayTips"/>  
</body>  
</html>