IE10-浏览器实现placeholder效果

如下图,在文本框为空时显示提示文字

在IE10+和chrome浏览器加placeholder属性及可实现 ,单在IE10-浏览器并不支持该属性,

以下是placeholder在IE10-浏览器的实现

 1 <style type="text/css">
 2         /*输入框为空时提示文字的样式*/
 3         label.placeholder
 4         {
 5             color: gray;
 6             padding-left: 3px;
 7             cursor: text;
 8             z-index: 1000;
 9             position: absolute;
10             background: transparent;
11             font-size: 0.8em;
12             padding-top: 4px;
13         }
14     </style>
15     <script type="text/javascript">
16         /* 设置输入框为空时输入框内显示/隐藏提示文字
17         * @param show 是否显示提示文字,默认显示
18         */
19         $.fn.setHint = function (show) {
20             if ('placeholder' in document.createElement('input'))
21                 return;
22 
23             var word = this.attr("placeholder");
24             if (word) {
25                 show = (show == undefined) ? (this.val() == "") : show; //根据内容是否为空确定是否显示
26                 if (show && this.val() == "") {
27                     this.prev("label.placeholder").show();
28                 } else if (!show) {
29                     this.prev("label.placeholder").hide();
30                 }
31             }
32         };
33 
34         // 页面初始化执行的脚本
35         $(function () {
36             // IE10及以上浏览器支持placeholder属性,不需要用脚本实现 
37             if (!('placeholder' in document.createElement('input'))) {
38                 $(":text[placeholder],:password[placeholder],textarea[placeholder]").wrap("<span></span>")
39                     .focus(function () {
40                         $(this).prev("label.placeholder").hide();
41                     }).blur(function () {
42                         if ($(this).val() == "") {
43                             $(this).prev("label.placeholder").show();
44                         }
45                     }).each(function () {
46                         var labelHtml = "<label class='placeholder'>" + $(this).attr("placeholder") + "</label>";
47                         $(labelHtml).insertBefore(this).click(function () {
48                             $(this).hide().next().focus();
49                         }).toggle($(this).val() == "");
50                     });
51             }
52         });
53     </script>

html:

<input type="text" placeholder="请输入用户名" />