banxitan
          

          

          


          
	
		

          統計
          
	
		

          留言簿(2)
          


        
		

        

          閱讀排行榜
          


		

          評論排行榜
          


	

          

          
	
					
	
          
		
          
			jQuery實現input文本框內灰色提示文本效果 和  input標簽獲取焦點是文本框內提示信息清空 
		
          
		
          一、jQuery實現input文本框內灰色提示文本效果
          

          

          <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>
          

          

		
          
			posted on 2009-04-23 11:50 MikyTan 閱讀(13377) 評論(3)  編輯  收藏  
		
          
	
          
	
	


	


          
	    
    


          

          評論
          
	
	
			
          
				# re: jQuery實現input文本框內灰色提示文本效果 和  input標簽獲取焦點是文本框內提示信息清空 
					
						2014-01-22 10:26
					
				劉德
			
          
			
          
				12  回復  更多評論
				  
			
          
		
			
          
				# re: jQuery實現input文本框內灰色提示文本效果 和  input標簽獲取焦點是文本框內提示信息清空 
					
						2014-05-19 10:33
					
				收到伐大方
			
          
			
          
				ASF阿斯頓發  回復  更多評論
				  
			
          
		
			
          
				# re: jQuery實現input文本框內灰色提示文本效果 和  input標簽獲取焦點是文本框內提示信息清空 
					
						2015-05-28 11:58
					
				的認同感
			
          
			
          
				 復合肥  回復  更多評論
				  
			
          
		

          




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊用戶登錄后才能發表評論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網站導航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				

          



    







          
        
	




主站蜘蛛池模板：
田东县|
固安县|
南汇区|
镇康县|
呼玛县|
九龙城区|
当涂县|
巴马|
洛扎县|
楚雄市|
家居|
彰武县|
嘉禾县|
阿拉善左旗|
电白县|
日喀则市|
尼木县|
阳朔县|
高唐县|
青川县|
衡东县|
上蔡县|
鄂托克旗|
长治市|
伽师县|
囊谦县|
原阳县|
南平市|
大同县|
华坪县|
余庆县|
松原市|
和平县|
亳州市|
万盛区|
沭阳县|
禄丰县|
昌黎县|
合肥市|
资中县|
宝兴县|