6.2.15 彷淘宝搜索框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} #search{ position: relative; } input{ outline: none; display: block; width: 490px; height: 50px; margin-top: 20px; font-size: 20px; border: 2px solid orange; border-radius: 10px; } label{ position: absolute; top: 20px; left: 10px; font-size:8px; color: gray; } </style> </head> <body> <div id="search"> <input type="text" id="text" /> <label for="txt" id="msg">路飞学城</label> </div> </body> <script type="text/javascript"> var txt = document.getElementById('text'); var msg = document.getElementById('msg'); //检测用户表单输入的时候 txt.oninput = function(){ if (this.value == '') { msg.style.display = 'block' }else{ msg.style.display = 'none' } } </script> </html>