当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示。
显示隐藏文本框内容.png

分析：

①首先表单需要两个新事件，获得焦点onfocus、失去焦点onblur
②如果获得焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容。
③如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改为默认文字。

  1. <style><br />        input{<br />            color: #ccc;<br />            border: 1px solid #ccc;<br />            outline: none;<br />        }<br />    </style><br /></head><br /><body><br />    <input type="text" value="手机"><br />    <script><br />        //获取元素<br />        var text = document.querySelector('input');<br />        //绑定焦点事件，处理程序<br />        text.onfocus = function () {<br />            if(this.value === '手机'){<br />                this.value = '';<br />            }<br />            //获得焦点后，需要把文本框字体变黑<br />            this.style.color = '#333';<br />        }<br />        //绑定失去焦点事件，处理程序<br />        text.onblur = function () {<br />            if(this.value === ''){<br />                this.value = '手机';<br />            }<br />            //失去焦点后，需要把文本框字体变灰<br />            this.style.color = '#ccc';<br />        }<br />    </script><br /></body>

.