zoukankan      html  css  js  c++  java
  • 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; 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;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>
  • 相关阅读:
    设计模式-观察者模式
    获取ubuntu中软件包的有用地址
    vim 简单命令
    adb logcat 日志过滤
    shell编程——
    shell编程——参数传递
    Chromecast
    linux 广播
    【转】Git命令解说
    linux 多播
  • 原文地址:https://www.cnblogs.com/heboliufengjie/p/4191946.html
Copyright © 2011-2022 走看看