placeholder在IE下无效的解决方式

最新推荐文章于 2022-03-01 16:25:01 发布

full-stack-coder

最新推荐文章于 2022-03-01 16:25:01 发布

阅读量682

点赞数

分类专栏： javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/zhanweichun/article/details/84268464

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<html>

<head>
   
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" src="http://localhost/jss/jquery-1.4.2.min.js"></script>
    <style type="text/css">


        .ff {
            color: white;
        }
        .tips{
            color: #999;
        }

    </style>



</head>

<body bgcolor="black" style="margin: 0px;">


<div id="main_container">
    <form id="idform">

        <table style="margin-left: 100px;">
            <thead>
                <tr>
                    <td colspan="2" align="center">
                        <span class="ff" style=" font-size: 23px; font-weight: bold;">登录</span>
                    </td>
                </tr>
            </thead>

            <tbody align="left">

                <tr>
                    <th><span class="ff">用户名：</span></th>
                    <td align="center"><INPUT id="u3" style="width: 190px;" tabindex="1" placeholder="请输入用户名"  name="username" type="text"  maxlength="20"></td>
                </tr>

                <tr>
                    <th><span class="ff">密　码：</span></th>
                    <td align="center"><INPUT id="u4"  style="width: 190px;" name="passwd" type="password" tabindex="2" placeholder="请输入密码" maxlength="20">
                        <input id="showPwd" class='tips'  style="width: 190px;" class="txt" type="text" value="请输入密码" tabindex="2" />
                    </td>
                </tr>
                <tr><td>
                   <br>
                </td><td>
                    <br>
                </td></tr>
                <tr >
                    <td align="right">
                        <INPUT id="u5" type="button" class="u5 " value="提交">
                    </td>
                    <td style="padding-left: 0px;">
                        <INPUT id="u6" type="reset" class="u6 " value="重置">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</div>

<script type="text/javascript">

    $(function(){
        var showPwd= $('#showPwd'),pwd = $('#u4');
        if(!$.browser.mozilla){ //其他下使用这种方式,FF浏览器可以用用HTML5的placeholder
            tips($('#u3'),'请输入用户名');

            pwd.hide();
            showPwd.show();
            pwd.blur(function(){
                if(pwd.val() == ''){
                    showPwd.show();
                    pwd.hide();
                }
            });
            showPwd.focus(function(){
                pwd.show().focus();
                showPwd.hide();
            });

        }else{
            showPwd.hide();
        }
    });
    var tips = function(id,tipmsg){

        var tips = tipmsg;
        id.val(tipmsg).addClass('tips');
        id.focus(function(){
            if(id.val() == tips) {
                id.val('').removeClass('tips');
            }
        }).blur(function(){
            if(id.val() == tips || id.val() == '') {
                id.val(tips).addClass('tips');
            }
        }).keydown(function(){
            if(id.val() == tips) {
                id.val('').removeClass('tips');
            }
        });
    }

   
    $("#u3,#u4").bind('keydown',function(event){
        if (event.keyCode == 13) {
            $('#u5').click();
        }
    });
</script>

</body>


</html>