js实现搜索栏效果
边肖在这里主要介绍了搜索栏在js中的实现(那些没有提交数据的)，重点是对焦点问题的理解。
那么边肖在这里就实现了这样一个搜索框
对焦点的理解：
一般来说，当我们用鼠标点击一个框时，光标停留在框事件上，实现用户与栏的交互，这表明框获得了焦点。在一个案例中，我们通常点击搜索栏来输入文本，此时搜索栏已经获得了焦点。
同样，失去焦点也意味着失去了在单击页面其余部分时可以在前一个框上执行的操作。
那么直接在边肖的情况下，代码如下：
CSS部分：
样式* { margin : 0；padd : 0；}输入，按钮{ border: 0 nonepadd : 0；outline-style:无；} .搜索{ margin: 100px auto宽度： 258 px；高度： 40px；飞越：隐藏；} .搜索输入{ float: left宽度： 208 px；高度： 40px；background: url('left.jpg ')无重复；左填充：8 px；color: # ccc} .搜索按钮{左侧浮动：高度： 40px；宽度： 42px；background: url('right.jpg ')无重复；cursor:指针；}/stylebody div class=' search '输入类型=' text '值='请输入.'id='txt' /文本框和框中的一个按钮架构div按钮id=' BTN '/按钮/div/bodyjs部分：
script window . onload=function(){ function $ id(id){ return document . getelementbyid(id)；}//虽然这种获取id的方式在这种情况下比较麻烦，但是避免一直写获取$ ID ('txt ')是一种常见的方式。onfocus=function () {if (this。值=='请输入.'){ this.value=//这是作业。别搞错了。this . style . color=' # 333 '；//Black } }//当用户点击时，初始文本消失$ id ('txt ')。onblur=function () {if (this。value=='') {this。值='请输入.'this . style . color=' # CCC '；//透明灰色}//谁调用这个来指向}//当它为空时，用户单击其他地方来显示初始化状态$ id ('BTN ')。onclick=function () {alert('我可以点击')；}//这只是测试按钮功能是否还在。} /script介绍了一些关于搜索栏的实用方法：
1.进入页面时，搜索栏会自动获得焦点
然后在js中，我们只需要添加对象。焦点()；
方法可以在进入页面时意识到光标已经显示在添加了该方法的对象上。
2.鼠标已进入搜索栏(或点击搜索框)。搜索字段的内容全部选中(这种方式方便用户在鼠标经过后直接删除所有搜索字段，用户不想删除时可以点击逐个删除)
对象。事件=函数(){ 0
this . select()；
}//这使得用户更容易删除
通用(单击后全选):
同时应用到这里的文本框，也提到了：
获取文本框中的内容：使用value属性获取
获取标签中的内容：获取innerHTML属性
搜索栏在实战中还有很多应用。这主要是对焦点问题的介绍。当然，获得焦点的方法不止一种，这将在后面由边肖补充。
当然，我们在车站看到的搜索框更完美
让我们看看JD.COM的搜索框。这只是一个例子。现在很多人用这个搜索框。获得焦点后，框中的文本仍会显示，但一旦输入内容，它就会消失。那么如何实现这样的搜索框呢？
首先，让我们明确一点，像这样的搜索框中显示的文本不是文本框的值
话不多说，放上代码(由边肖制造的简易导航盒实现):
首先，我们在div中添加了一个标签，这是我们点击后看到的文本
然后给他添加CSS属性(注意标签标签只能通过定位定位在文本框中):搜索标签{ font-size : 12px；color: # ccc绝对位置：/*使用绝对定位将标签定位到文本框的适当位置。当然，给父div框*/top:12px加上相对定位；left:12pxcursor:文本；/*当你把鼠标放在标签文本上时，它仍然是一个光标*/}那么js就有很大的不同：
script window . onload=function(){ function $ id(id){ return document . getelementbyid(id)；} $ id ('txt ')。on input=function(){//判断用户输入字段是否为空，使标签消失if (this。value=='') {$ id ('lab ')。风格。display=' block} else { $ id(' lab '). style . display=' none '；} } }/脚本呈现如下。如果您输入它，浅文本会消失
当然，在边肖的案例中已经考虑到了一些兼容性问题，如果IE9之后的浏览器直接在文本框中添加一个属性，H5就可以达到这种效果。
以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。
