在IE9中实现placeholder功能

最新推荐文章于 2024-06-18 10:29:55 发布

justforuse

最新推荐文章于 2024-06-18 10:29:55 发布

阅读量1.2w

点赞数

分类专栏： javascript 文章标签： ie 9 javascript 输入提示

本文链接：https://blog.csdn.net/u014291497/article/details/51340044

版权

javascript 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

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();
        }
    })

})

由于Chrome等浏览器本身是支持placeholder属性的，所以需要判断浏览器类型再加载js文件。

IE中文本输入框和密码输入框默认大小略有不同，需要一起定义一下；

而且两个输入框不能显示在横向保持对齐。只要添加vertical-align: middle; 就可以了。

初始状态：

这里写图片描述

输入一些内容后：

这里写图片描述

当然这个只停留在了实现，如果能以插件什么的形式展示的话，功能性会更强。

justforuse

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
在IE9中实现placeholder功能

placeholder是文本框用来提示内容的属性，比如：<input id="txt" type="text" name="account" placeholder="请输入帐号">会显示为：然而IE9不支持此属性，可以使用js来简单模拟placeholder行为。我的基本思路是为输入框设置value值，并设置字体颜色，根据输入框内容模拟placeholder。对于密码输入框placehol
复制链接

扫一扫

专栏目录