ie下的placeholder原生js实现方法

css代码

*{
              margin: 0;
              padding: 0;
          }
          body{
              *text-align: center;
          }
          /*登陆表单*/
          .login_form{
              width: 220px;
              margin: 0 auto;
              background-color: #F2F7FA;
              padding: 20px;
          }
          /*输入的用户名、密码框*/
          .ipt_txt{
              width: 220px;
              height: 30px;
              line-height: 30px;
              vertical-align: middle;
              border: 1px solid #C7C7C7 ;
              outline: none;
              padding-left: 10px;
          }
          /*登陆按钮*/
          .btn_login{
              width: 220px;
              height: 45px;
              line-height: 45px;
              background-color: #67C53C;
              color: #ffffff;
              outline: none;
              border: none;
              font-size: 18px;
              cursor: pointer;
          }
          .btn_login:hover{
              background-color:#26B20E;
          }
          /*每个div相距*/
          .txt{
              margin-bottom: 10px;
          }
          /*checkbox居中对齐问题*/
          .align{
              font-size:12px;
              *display: table
          }
          .pos{
              vertical-align: top;
              *display: table-cell;
              *vertical-align: middle;
          }
          .poschk{
              *margin-left: -6px;
          }
          .pos_forget_psd{
              margin-left: 25px;
              *margin-left: 30px;
          }
          /*用户名、密码提示文字信息*/
          .txtTip{
              position: absolute;
              left: 0;
              top:0;
              _top:2px;
              display: block;
              height: 30px;
              line-height: 30px;
              font-size: 12px;
              padding-left: 10px;
              opacity:0.5;
              text-align: left;
           /*   background-color: green;*/
          }
          /*登陆失败提示信息*/
        .login_err_msg{
            color: red;
            font-size: 12px;
            width: 220px;
            height: 24px;
            line-height: 24px;
            text-align: left;
            padding-left: 10px;
        }

html代码

<form name='user_login' action="post" class="login_form" onsubmit="login_submit();return false;">
    <div id="showmsg" class="login_err_msg"></div>
    <div style="position: relative" class="txt">
      <input type="text" name="username" class="ipt_txt" autocomplete="off" maxlength="50"
             onblur="blurecheck(this)" onfocus="getcheck(this)"><span class="txtTip" onclick="tipshow(this)" style="display: block">用户名</span>
    </div>
    <div style="position: relative" class="txt">
      <input type="password" name="password" class="ipt_txt" autocomplete="off" maxlength="20"
               onblur="blurecheck(this)" onfocus="getcheck(this)"><span class="txtTip" onclick="tipshow(this)" style="display: block">密码</span>
    </div>
    <div class="txt align">
        <input type="checkbox" id="chk" class="pos poschk"/>
        <label class="pos" for="chk">下次自动登陆</label>
        <a class="pos pos_forget_psd" href="">忘记密码</a>
    </div>
    <div class="txt">
         <input type="submit" class="btn_login" value="登陆"
                onmouseover="btn_login_color_change(this,'in')"
                onmouseout="btn_login_color_change(this,'out')">
    </div>
</form>

js代码

var showmsgdiv = document.getElementById("showmsg");
    //显示的提示信息 点击事件
    function tipshow(obj){
        //当前节点的上一个兄弟节点  注意空格也是文本节点
        var tempObj = obj.previousSibling;
        tempObj.focus();
        tempObj.style.borderColor="#2684C2";
        obj.style.display="none"
    }
    //得到焦点时候
    function getcheck(obj){
        //得到焦点时候边框颜色发生变化
        obj.style.borderColor="#2684C2";
        if(obj.value==''||obj.value==null){
            /*提示的文本文字隐藏*/
            obj.nextSibling.style.display="none";
        }
    }
    // 失去焦点时候
    function blurecheck(obj){
        /*失去焦点时候颜色变化*/
        obj.style.borderColor="#C7C7C7"
        if(obj.value==''||obj.value==null){
            /*提示文本显示*/
            obj.nextSibling.style.display="block";
        }
    }
    /*提交表单*/
    function login_submit(){
        var oform = document.forms["user_login"]
        var ouser = oform[0].value;
        var opsd = oform[1].value;
        if(ouser==''){
            showmsgdiv.innerHTML="请输入您的账号";
        }else if(opsd==''){
            showmsgdiv.innerHTML="请输入您的密码";
        }else {
            showmsgdiv.innerHTML="帐号或密码有误";
        }
        return false;

    }
    //解决提交按钮 hover 颜色变化  ie6不支持hover
    function btn_login_color_change(obj,flag){
       var color = flag=='in'?"#26B20E":"#67C53C";
        obj.style.backgroundColor=color;
    }