使用js模拟实现JD.COM搜索框，主要使用js中的onfocus(注册焦点事件)和onblur(丢失焦点事件)；

主要实现了：

当鼠标点击进去，里面的默认内容就消失了；进入后，点击搜索框外，输入的内容仍在搜索框内；如果输入为空，在搜索框外点击，里面会自动显示默认内容；改变内容颜色的效果图

密码

！doctype HTML HTML Head metachartset=' UTF-8 ' Title JD.COM搜索框/Title Style Type=' Text/CSS ' * { margin : 0；padd : 0；border : 0；} # search { width: 550pxheight: 35pxmargin: 100px自动；} #搜索输入{ width: 492pxheight: 31pxborder: 2px实心# f10215outline-style:无；/*消除原有边框默认属性*/向左浮动：左填充left: 4px/*搜索时让文本远离框4px */color : # 888；} #搜索按钮{ width: 50pxheight: 35px背景色： # f 10215；向左浮动：color:白色；} /style脚本类型='text/javascript' var关键字=' iphone 11//搜索框中的默认搜索词window . onload=function(){//获取对象varbtnsearch=document . getelementbyid(' search ')。getelementsbyname(' button ')[0]；//获取对象vartxt=document . getelementbyid(' search ')。搜索框的getelementsbyname(' input ')[0]；//注册焦点事件txt。onfocus=搜索框的function(){//在焦点txt.style.color='black '时使搜索框的文本为黑色；//如果搜索框是关键字，注册焦点，使搜索框为空if (txt。value==关键字){txt。值=' '；} }//注册失焦事件txt。onblur=搜索框的function(){//如果失去焦点时搜索框为空，则让搜索框显示默认关键字if (txt。value=='') {this。value=关键字；this . style . color=' # 888 '；} } }/script/head body div id=' search ' input type=' text ' value=' iphone 11 '/button search/button/div/body/html onfocus事件：该事件在对象获得焦点时发生，这在表单中经常使用。onblur事件：当对象失去焦点时发生该事件。css: outline中的属性用于修饰元素的轮廓；

摘要

以上就是利用JavaScrip仿真实现模仿JD.COM搜索框功能的介绍。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！