简易焦点事件

电玩女神 2022-11-21 14:57 120阅读 0赞

**核心：获取焦点和失去焦点**

`获取焦点：`

ipt.onfocus = function () {
    
    }

`失去焦点：`

ipt.onblur = function () {
    
    }

CSS样式：

html和js部分：

<body>
        <div>
            <input type="text" value="iPhone">
            <button>搜索</button>
        </div>
        <script>
            var ipt = document.querySelector('input');
            //获取焦点
            ipt.onfocus = function () { 
                //鼠标点击输入框时,若有文本就清空
                if (this.value !== '') { 
                    this.value = '';
                }
                //设置输入字体颜色
                this.style.color = '#333'
            }
            //失去焦点
            ipt.onblur = function () { 
                //鼠标点击空白时出现提示文本
                if (ipt.value == '') { 
                    ipt.value = 'iPhone';
                }
                this.style.color = 'gainsboro';
            }
    
        </script>
    </body>

效果图：  
![在这里插入图片描述][20201102233137491.png_pic_left]  
![在这里插入图片描述][2020110223315096.png_pic_left]

[20201102233137491.png_pic_left]: /images/20221120/4f9aa6b272e345adb11f1ce63ab13544.png
[2020110223315096.png_pic_left]: /images/20221120/566cd1bf07d942f6856c818875c5f698.png