在IE9中实现placeholder功能

时间：2016-05-13 03:20:31 阅读：250 评论：0 收藏：0 [点我收藏+]

标签：

placeholder是文本框用来提示内容的属性，比如：

<input id="txt" type="text" name="account" placeholder="请输入帐号">

会显示为：
技术分享
然而IE9不支持此属性，可以使用js来简单模拟placeholder行为。

我的基本思路是为输入框设置value值，并设置字体颜色，根据输入框内容模拟placeholder。

对于密码输入框placeholder属性的实现，我的思路是添加一个普通的文本输入框在密码框的位置，当点击输入框的时候隐藏它，显示原本的密码输入框并设置焦点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery.js"></script>
    <style>
        input{
            width:170px;
            height:15px;
            vertical-align: middle;
        }
        .hint{
            color:#666;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <form action="" method="get">
        文本框：<input id="txt" type="text" name="account" placeholder="请输入帐号">
        <hr>
        密码框：

        <span>
            <input id="pwd" type="password" name="password" placeholder="请输入密码"><input id="pwdSpan" type="text" placeholder="请输入密码">
        </span>

        <button type="submit" onclick="submit()">Submit</button>
    </form>
    <script>
        $(function(){
            $("#pwdSpan").hide();
        })
    </script>
    <!--[if lte IE 9]>
        <script src="ie.js"></script>
    <![endif]-->

</body>
</html>

ie.js:

$(function(){
    var txtHolder=$("#txt").attr("placeholder");
    var pwdHolder=$("#pwdSpan").attr("placeholder");
    $("#txt").val(txtHolder).addClass("hint");
    $("#pwdSpan").val(pwdHolder).addClass("hint").show();
    $("#pwd").hide();
    $("#txt").focus(function(){
        if($(this).val() == txtHolder){
            $(this).val("").removeClass("hint");
        }
    }).blur(function(){
        if($(this).val().trim() === ""){
            $(this).val(txtHolder).addClass("hint");
        }
    });

    $("#pwdSpan").focus(function(){
        $(this).css("display", "none");
        $("#pwd").show().focus();
    })

    $("#pwd").blur(function(){
        if($("#pwd").val().trim() == ""){
            $(this).hide();
            $("#pwdSpan").show();
        }
    })

})