首页 > 代码库 > js获得焦点和失去焦点那些事

js获得焦点和失去焦点那些事

<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="智能社 - zhinengshe.com"><meta name="copyright" content="智能社 - zhinengshe.com"><title>智能社 - www.zhinengshe.com</title><style>* { margin:0; padding:0; }.box {position:relative; width:200px; margin:50px auto;}.box span { position:absolute; top:0; left:5px; height:40px; line-height:40px; color:#999; }#inp1,#pass{ position:absolute; top:0; left:0; border:1px solid #000; /* border:none 0;这个是兼容的写法 */outline:none;width:190px; height:40px; line-height:40px; padding:0 5px; background:none;}#pass{top:55px;}input::-ms-clear { display:none; } /* 去掉IE10输入框后的叉号 */input::-ms-reveal{ display:none;}    /* 去掉输入密码时的眼睛 */</style><script>window.onload=function (){    var oInp=document.getElementById(inp1);    var oSpan=document.getElementById(span1);        oInp.onfocus=function (){        oSpan.style.display=none;    };    oInp.onblur=function (){//失去焦点判断输入为空时                if (oInp.value.length == 0)        {            oSpan.style.display=block;        }        };    oSpan.onclick=function (){//点击提示文字时情况        oInp.focus();    };};</script></head><body>    <div class="box">        <input type="text" id="inp1" />        <span id="span1">我是提示文字</span>        <input type="password" id="pass"/>     </div>   </body></html>

 

js获得焦点和失去焦点那些事