JavaScript+html显示隐藏文本框的内容

Posted 2021-12-22 橘猫吃不胖～

【案例分析】本案例需要为一个文本框添加提示文本。当单击文本框时，里面的默认提示文字会隐藏，鼠标指针离开文本框，里面的文字会显示出来。

效果图如下：

当未单击文本框时：

当单击文本框时：

实现步骤如下：

1、为元素绑定获取文本框焦点事件onfocus和失去焦点事件onblur
2、如果获取焦点时，需要判断表单里面的内容是否为默认文字；如果是默认文字，就清空表单内容
3、如果失去焦点，需要判断表单内容是否为空；如果为空，则表单里边的内容改为默认文字

html页面中代码如下：

    <input type="text" id="userName" value="手机" style="color: #999;">
    <script>
        //1.获取元素：input
        var text = document.querySelector('input');
        //2.给元素注册获取焦点的事件：onfoucs
        text.onfocus = function () 
            if (this.value === '手机') 
                this.value = '';
            
            this.style.color = '#333';
        
        //3.给元素注册失去焦点的事件：onblur
        text.onblur = function () 
            if (this.value === '') 
                this.value = '手机';
            
            this.style.color = '#999';
        
    </script>