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 >

转载于:https://www.cnblogs.com/fengjun/archive/2011/12/28/2304871.html