jQuery实现input文本框内灰色提示文本效果和 input标签获取焦点是文本框内提示信息清空

关注

转载最新推荐文章于 2023-07-17 10:27:13 发布 4.5k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

一、jQuery实现input文本框内灰色提示文本效果

   Html代码  
   
  
 <html>    
 <head>    
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
 <title>input test</title>    
 <script type="text/javascript"  
     src="./js/jquery.js"></script>  
 <script type="text/javascript">    
 function inputTipText(){      
 $("input[class*=grayTips]") //所有样式名中含有grayTips的input     
 .each(function(){     
    var oldVal=$(this).val();   //默认的提示性文本     
    $(this)     
    .css({"color":"#888"})  //灰色     
    .focus(function(){     
     if($(this).val()!=oldVal){$(this).css({"color":"#000"})}else{$(this).val("").css({"color":"#888"})}     
    })     
    .blur(function(){     
     if($(this).val()==""){$(this).val(oldVal).css({"color":"#888"})}     
    })     
    .keydown(function(){$(this).css({"color":"#000"})})     
        
 })     
 }     
     
 $(function(){     
 inputTipText();  //直接调用就OK了     
 })     
 </script>    
 </head>    
 <body>    
 <input type="text" value="输入您的用户名" class="grayTips" />    
 <input type="text" value="输入您的登录密码" class="aaagrayTips"/>    
 </body>    
 </html>  
 二、input标签获取焦点是文本框内提示信息清空   
 <html>  
 <head>  
 <title></title>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
 </head>  
 <script language="javascript" type="text/javascript">   
 function addLoadEvent(func){  
     var oldonload = window.onload;  
     if (typeof window.onload != 'function'){  
         window.onload = func;  
     }else{  
         window.onload = function(){  
             oldonload();  
             func();  
         }  
     }  
 }  
 function checkText(){  
     var textId = document.getElementById('test');  
         //设置文本框中的字体颜色为灰色  
         document.getElementById('test').style.color='#C0C0C0';  
     var textDefault = '中文';  
     function cls(){  
         if (this.value == textDefault){  
             this.value = '';  
         }  
     }  
     function res(){  
         if (this.value == ''){  
             this.value = textDefault;  
         }  
     }  
     textId.onfocus = cls;  
     textId.onblur = res;  
 }  
 addLoadEvent (checkText);  
 </script>  
 <body>  
 <input type="text" id="test" value="中文" />  
 </body>  
 </html>  