1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title></title>
    6.     </head>
    7.     <style>
    9.         input{
    10.             color: #999;
    11.         }
    13.     </style>
    14.     <body>
    16.         <input type="text"  value="手机" />
    18.         <script>
    19.             /*
    20.              * 当鼠标点击文本框时，里面的默认文字会隐藏，当鼠标离开文本框时，里面的文字显示。
    21.              * 案例分析：
    22.              * (1)首先表单需要2个事件：获得焦点onfocus，失去焦点onblur
    23.              * (2)如果获得焦点，判断表单里面内容是否为默认文字，如果是，就清空表单内容
    24.              * (3)如果失去焦点，判断表单内容是否为空，如果为空，就将表单内容还原为默认文字
    25.              */
    26.             //获取事件源
    27.             var text=document.querySelector("input");
    29.             //注册事件，获得焦点事件 onfocus
    30.             text.onfocus=function(){
    31.                 if(text.value=="手机"){
    32.                     text.value=" ";
    33.                 }
    34.                 text.style.color="#333";//获得焦点需要把输入的文字颜色加深
    35.             }
    37.             //注册事件，失去焦点事件 onblur
    38.             text.onblur=function(){
    39.                 if(text.value==" "){
    40.                     text.value="手机";
    41.                 }
    42.                 text.style.color="#999";//失去焦点，需要把文本框里面的文字颜色变浅
    43.             }
    45.         </script>
    46.     </body>
    47. </html>