Ver código fonte

placeholder兼容IE8(bug5647)

zhangxc 5 anos atrás
pai
commit
a2d4bed37f
3 arquivos alterados com 27 adições e 1 exclusões
  1. 7 1
      src/css/staticSearch.css
  2. 1 0
      src/html/staticSearch.html
  3. 19 0
      src/js/staticSearch.js

+ 7 - 1
src/css/staticSearch.css

@@ -31,7 +31,13 @@
     position: relative;
     top: 1px;
 }
-
+.placeholder{
+    color: #b2b2b2;
+    color: #777;
+    position: absolute;
+    left: 5px;
+    display: none;
+}
 .container .staticSearchT button {
     position: absolute;
     right: 0;

+ 1 - 0
src/html/staticSearch.html

@@ -42,6 +42,7 @@
             <div class="staticSearchT">
                 <div class="ipt">
                     <input type="text" value="" placeholder="医学知识搜索">
+                    <span class="placeholder">医学知识搜索</span>
                 </div>
                 <i id="clearKnowledge"></i>
                 <button >搜索</button>

+ 19 - 0
src/js/staticSearch.js

@@ -157,3 +157,22 @@ $(".staticSearchT").on('click','#clearKnowledge',function() {
     $(this).prev('.ipt').find('input').focus()
     $(this).css({display:"none"})
 })
+if(is8Ie){
+    $(".placeholder").css("display","inline-block")
+    $(".ipt input").on("focus", function(){
+        $(".placeholder").css("display","none")
+    }).on("blur",function(){
+        let val = $(".ipt").val()
+        console.log('val',val)
+        if(!val){
+            $(".placeholder").css("display","inline-block")
+        }else{
+            $(".placeholder").css("display","none")
+        }
+    })
+    $(".placeholder").on("click",function(){
+        $(".placeholder").css("display","none")
+        $(".ipt input").focus()
+    })
+}
+