仿某东的搜索框初级版
Posted niuyaomin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了仿某东的搜索框初级版相关的知识，希望对你有一定的参考价值。
首先需要获取焦点事件 onfocus和失去焦点事件 onblur
下面是代码环节：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <style type="text/css"> input{ color: #999; outline:2px solid red; outline-offset: 2px; border: none; display: block; margin:50px auto; } </style> <title>Document</title> </head> <body> <input type="text" name="" id="" value="手机" /> <script type="text/javascript"> // 获取元素 var ipt = document.getElementsByTagName("input"); // 注册事件 获取焦点事件 onfocus ipt[0].onfocus = function(){ // alert("得到了焦点");实验一下能不能得到焦点 if(ipt[0].value === "手机"){ ipt[0].value = "" } ipt[0].setAttribute("style","color: #333;"); } // 注册事件 失去焦点事件 onblur ipt[0].onblur = function(){ // alert("失去焦点");实验一下能不能失去焦点 if(ipt[0].value === ""){ ipt[0].value = "手机" } ipt[0].setAttribute("style","color: #999;"); } </script> </body> </html>
某东效果图
以上是关于仿某东的搜索框初级版的主要内容，如果未能解决你的问题，请参考以下文章