【文件属性】：
文件名称：js实现搜索栏效果
文件大小：86KB
文件格式：PDF
更新时间：2020-12-12 18:12:46
js js代码 文本框
小编这边主要是介绍一个js中搜索栏的实现（没有提交数据那些），重点在于对焦点问题的理解。
那么这边小编就是要实现这样的一个搜索框
对焦点的理解：
通俗来讲当我们鼠标单击一个盒子时光标停留在该盒子事件上实现用户与栏之间的交互，这样就表明该盒子获取了焦点，以案例来说我们平常搜索栏点击可以输入文字，这个时候该搜索栏就获得了焦点。
同理失去焦点也是同样当点击页面其余位置时失去对先前盒子可以进行的操作。
那么直接以小编这个案例来说代码如下：
CSS部分：
<style>
*{
margin: 0;
padding: 0;
}
input,button{
border: 0 non