分享一下我老師大神的人工智能教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
placeholder是文本框用來提示內容的屬性，比如：
<input id="txt"type="text" name="account" placeholder="請輸入帳號">- 1
會顯示為：
然而IE9不支持此屬性，可以使用js來簡單模擬placeholder行為。
我的基本思路是為輸入框設置value值，并設置字體顏色，根據輸入框內容模擬placeholder。
對于密碼輸入框placeholder屬性的實現，我的思路是添加一個普通的文本輸入框在密碼框的位置，當點擊輸入框的時候隱藏它，顯示原本的密碼輸入框并設置焦點。
<!DOCTYPE html><htmllang="en"><head> <metacharset="UTF-8"> <title></title> <scriptsrc="../jquery.js"></script> <style> input{ width:170px; height:15px; vertical-align: middle; } .hint{ color:#666; } .hide{ display: none; } </style></head><body> <formaction=""method="get"> 文本框：<inputid="txt"type="text"name="account"placeholder="請輸入帳號"> <hr> 密碼框： <span> <inputid="pwd"type="password"name="password"placeholder="請輸入密碼"><inputid="pwdSpan"type="text"placeholder="請輸入密碼"> </span> <buttontype="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; 就可以了。
初始狀態：
輸入一些內容后：
當然這個只停留在了實現，如果能以插件什么的形式展示的話，功能性會更強。