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="請輸入使用者名稱" />

 

IE10-瀏覽器實現placeholder效果