分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

                     

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

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

会显示为:
在IE9中实现placeholder功能-LMLPHP
然而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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43

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();        }    })})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

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

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

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

初始状态:

在IE9中实现placeholder功能-LMLPHP

输入一些内容后:

在IE9中实现placeholder功能-LMLPHP

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

           

给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

在IE9中实现placeholder功能-LMLPHP
01-04 14:08