分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！
placeholder是文本框用来提示内容的属性，比如：
<input id="txt" type="text" name="account" placeholder="请输入帐号">- 1
会显示为：
然而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; 就可以了。
初始状态：
输入一些内容后：
当然这个只停留在了实现，如果能以插件什么的形式展示的话，功能性会更强。