Dom实现input的焦点触发

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

 onfocus         获得鼠标焦点触发

onblur          失去鼠标焦点触发

方法一，使用两个事件

代码如下：

<input type="text" name="" id="" value="请输入信息">
        <script>
            var input = document.querySelector('input');
            input.onfocus = function(){
                this.value = '';
            }
            input.onblur = function(){
                this.value = '请输入信息';
            }
        </script>

方法二：封装函数

代码如下：

<input type="text" value="请输入信息" onfocus="hidtxt()" onblur="showtxt()">
        <script>
            var input = document.querySelector('input');
            function hidtxt(){
                //如果不加if，那么输入其他信息失去焦点后输入框也会清空
                if(input.value == '请输入信息'){
                    input.value = '';
                }
            }
            function showtxt(){
                if(input.value ==''){
                input.value = '请输入信息';
            }}
        </script>

效果如下：