看完这个，鼠标失焦和获焦还怕不会用？

基础知识

鼠标失去焦点和获得焦点在表单中是最常见的

1. 鼠标获得焦点：
   用到的是JS中的onfocus

2. 鼠标失去焦点：
   用到的是JS中的onblur

效果展示

• 页面加载后
  
• 鼠标获得焦点
  
• 鼠标失去焦点
  

HTML代码

<input type="text" placeholder="请输入账号">

JS实现代码

<script>
    
    window.onload = function() {
        var input = document.getElementsByTagName('input')[0];
        //获得焦点
        input.onfocus = function() {
            this.style.width = '500px';
            this.style.height = '30px';
            input.style.outlineStyle = 'none';
        }

        //失去焦点
        input.onblur = function (){
            this.style.border = '2px solid red';
        }    
    }
</script>