js案例焦点事件。（当鼠标点击输入框,默认值消失,密码验证）

一、解决思路

        运用onfocus（获得焦点）和onblur（失去焦点）两个方法。当鼠标点击输入框时让输入框的value值清空，当鼠标离开输入框时，同时用户没有在输入框里输入任何数据，让输入框的value值变为输入。

二、代码演示

    <input type="text" name="" id="sr" value="输入">
    <script>
        let sr=document.querySelector('#sr')
        sr.onfocus=function(){
            if(sr.value=="输入"){
                sr.value=""
                console.log('获得')
            }
        }
        sr.onblur=function(){
            if(sr.value==''){
                sr.value="输入"
            }
        }
    </script>

三、添加密码验证

    <input type="text" name="" id="sr" value="输入">
    <div id="s">最少支持6位字符</div>
    <script>
        let sr=document.querySelector('#sr')
        let s=document.querySelector('#s')
        sr.onfocus=function(){
            if(sr.value=="输入"){
                sr.value=""
                console.log('获得')
            }
        }
        sr.onblur=function(){
            if(sr.value==''){
                sr.value="输入"
            }
            if(sr.value.length>6){
                s.innerHTML="正确"
            }
            else{
                s.innerHTML="最少支持6位字符"
            }
        }
    </script>