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

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

 

Html代码   收藏代码
  1. <html>    
  2. <head>    
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
  4. <title>input test</title>    
  5. <script type="text/javascript"  
  6.     src="./js/jquery.js"></script>  
  7. <script type="text/javascript">    
  8. function inputTipText(){      
  9. $("input[class*=grayTips]") //所有样式名中含有grayTips的input     
  10. .each(function(){     
  11.    var oldVal=$(this).val();   //默认的提示性文本     
  12.    $(this)     
  13.    .css({"color":"#888"})  //灰色     
  14.    .focus(function(){     
  15.     if($(this).val()!=oldVal){$(this).css({"color":"#000"})}else{$(this).val("").css({"color":"#888"})}     
  16.    })     
  17.    .blur(function(){     
  18.     if($(this).val()==""){$(this).val(oldVal).css({"color":"#888"})}     
  19.    })     
  20.    .keydown(function(){$(this).css({"color":"#000"})})     
  21.        
  22. })     
  23. }     
  24.     
  25. $(function(){     
  26. inputTipText();  //直接调用就OK了     
  27. })     
  28. </script>    
  29. </head>    
  30. <body>    
  31. <input type="text" value="输入您的用户名" class="grayTips" />    
  32. <input type="text" value="输入您的登录密码" class="aaagrayTips"/>    
  33. </body>    
  34. </html>  
  35. 二、input标签获取焦点是文本框内提示信息清空   
  36. <html>  
  37. <head>  
  38. <title></title>  
  39. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  40. </head>  
  41. <script language="javascript" type="text/javascript">   
  42. function addLoadEvent(func){  
  43.     var oldonload = window.onload;  
  44.     if (typeof window.onload != 'function'){  
  45.         window.onload = func;  
  46.     }else{  
  47.         window.onload = function(){  
  48.             oldonload();  
  49.             func();  
  50.         }  
  51.     }  
  52. }  
  53. function checkText(){  
  54.     var textId = document.getElementById('test');  
  55.         //设置文本框中的字体颜色为灰色  
  56.         document.getElementById('test').style.color='#C0C0C0';  
  57.     var textDefault = '中文';  
  58.     function cls(){  
  59.         if (this.value == textDefault){  
  60.             this.value = '';  
  61.         }  
  62.     }  
  63.     function res(){  
  64.         if (this.value == ''){  
  65.             this.value = textDefault;  
  66.         }  
  67.     }  
  68.     textId.onfocus = cls;  
  69.     textId.onblur = res;  
  70. }  
  71. addLoadEvent (checkText);  
  72. </script>  
  73. <body>  
  74. <input type="text" id="test" value="中文" />  
  75. </body>  
  76. </html>  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值