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>