div自適應瀏覽器寬度，IE10-瀏覽器實現placeholder效果-變量-匯編語言學習筆記

div自適應瀏覽器寬度，IE10-瀏覽器實現placeholder效果

2023-11-19 阅读 20 评论 0

摘要：如下圖,在文本框為空時顯示提示文字在IE10+和chrome瀏覽器加placeholder屬性及可實現 ,單在IE10-瀏覽器并不支持該屬性, 以下是placeholder在IE10-瀏覽器的實現 1 <style type="text/css"> 2 /*輸入框為空時提示文字的樣式*/ 3 label.placeholder 4 {

如下圖,在文本框為空時顯示提示文字

在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="請輸入用戶名" />

div自適應瀏覽器寬度？?

轉載于:https://www.cnblogs.com/zengyy/p/4780032.html

原文链接：https://hbdhgg.com/2/180780.html

发表评论: