js文本框失去焦点和获取焦点时不同显示

获取焦点时隐藏文本框内容，失去焦点时显示文本框内容   获得焦点事件：onfocus 失去焦点事件：onblur   css样式代码：

<style>
        .box {
            width: 300px;
            height: 50px;
            margin: 200px auto;
        }

        #inputbox {
            height: 20px;
            color: rgba(0, 0, 0, .3);
        }

        #btn {
            width: 50px;

        }
    </style>

 <!-- 获取焦点时隐藏文本框内容，失去焦点时显示文本框内容 -->
    <div class="box">
        <input type="text" id="inputbox" value="请输入...">
        <input type="button" id="btn" value="搜索">
    </div>
    <script>
        //获取事件源
        var inputbox = document.querySelector('#inputbox');
        //绑定事件，执行程序
        inputbox.onfocus = function () {
            //获取到焦点的时候不显示文本框里的文字
            inputbox.value = '';
        }
        //但是失去焦点的时候要再次显示文本框里的文字
        inputbox.onblur = function () {
            inputbox.value = '请输入文字';
        }
    </script>