首页 > 代码库 > 仿淘宝页面的搜索引擎，点击输入框文字不消失
仿淘宝页面的搜索引擎，点击输入框文字不消失
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #txt { 8 position: relative; 9 10 } 11 #lbl { 12 position: absolute; 13 top: 8px; 14 left: 10px; 15 color: #ccc; 16 cursor: text; 17 } 18 </style> 19 <script> 20 window.onload = function () { 21 function $(id){ 22 return document.getElementById(id); 23 } 24 $("txt").oninput = function () { 25 if(this.value =http://www.mamicode.com/=""){ 26 $("lbl").style.display="block"; 27 } 28 else{ 29 $("lbl").style.display="none"; 30 } 31 } 32 } 33 </script> 34 </head> 35 <body> 36 <div class="search"> 37 <input type="text" id="txt"/> 38 <label for="txt" id="lbl">必败的国际大牌</label> 39 </div> 40 </body> 41 </html>
注意：
上面的仿淘宝搜索引擎写了一大堆 ，其实可以化简为一个属性
placeholder=必败的国际大牌
但是不支持IE678
仿淘宝页面的搜索引擎，点击输入框文字不消失
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。