js如何实现搜索栏效果

 


  //盒子架构div中一个文本框一个按钮
 

js部分：

这边另外介绍一些关于搜索栏实用方法：

1.进入页面时搜索栏已经自动获取了焦点

那么在js之中我们只需要将对象加上  对象.focus();

方法就可以实现进入页面时光标已经显示在添加该方法的对象上。

2.鼠标进过（或点击搜索框）搜索栏搜索栏内容被全选（该方法方便用户输入后鼠标经过可以直接删除搜索栏所有，当不想删除所有时用户可以点击在进行一个一个删除操作）

对象.事件=function(){

    this.select();

}  //这样就更便捷用户的删除操作

常见的（点击后全选）：

同时这边应用到了文本框同样也提及一下：

获取文本框中内容：以value属性获取

获取标签中内容：innerHTML属性获取

搜索栏在实战中运用还是很多的，这边主要是对于焦点问题的一个介绍，当然获取焦点方法不止这单单一种，之后小编会补充。     

当然的我们在站中看到的搜索框有更完善的

我们看一下京东的搜索框，这边只是举例那么现在很多都是用到这样的搜索框，获取焦点以后框内文字还是有显示但你一输入内容他就消失了。那么怎样实现这样的搜索框呢？

首先我们明确一点，类似这样的搜索框显示的文字并非是文本框的value值

话不多说撸上代码（以小编做的那个简单的导航框实现）：

首先div中我们加上了label标签，也就是我们点击后看到的文字

然后给他加上CSS属性（注意label标签只能以定位的方式定位到文本框中）：

.search label {
  font-size: 12px;
  color:#ccc;
  position: absolute; /*以绝对定位来定位label到文本框合适位置当然同时也要为父亲div盒子加上相对定位*/
  top:12px;
  left:12px;
  cursor: text; /*使鼠标放到lable文字上时还是光标*/
 }

那么这样的话js部分有很大差异：

效果图如下，若输入则浅文字消失

当然小编这个案例考虑到了一些兼容性问题，如果是在IE9后的浏览器用H5有的方法直接给文本框加上一个属性就可以实现这样的效果。

感谢你能够认真阅读完这篇文章，希望小编分享的“js如何实现搜索栏效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!