js实现搜索栏效果

Z时代
2024-01-10
分类：综合

小编这边主要是介绍一个js中搜索栏的实现（没有提交数据那些），重点在于对焦点问题的理解。

那么这边小编就是要实现这样的一个搜索框

对焦点的理解：

通俗来讲当我们鼠标单击一个盒子时光标停留在该盒子事件上实现用户与栏之间的交互，这样就表明该盒子获取了焦点，以案例来说我们平常搜索栏点击可以输入文字，这个时候该搜索栏就获得了焦点。

同理失去焦点也是同样当点击页面其余位置时失去对先前盒子可以进行的操作。

那么直接以小编这个案例来说代码如下：

CSS部分：


<style> 
 *{
  margin: 0;
  padding: 0;
 }
 input,button{
  border: 0 none;
  padding: 0;
  outline-style: none;
 }
 .search{
  margin: 100px auto;
  width: 258px;
  height: 40px;
  overflow: hidden;
 }
 .search input{
  float: left;
  width: 208px;
  height: 40px;
  background: url("left.jpg") no-repeat;
  padding-left:8px;
  color: #ccc;
 }
 .search button{
  float: left;
  height: 40px;
  width: 42px;
  background: url("right.jpg") no-repeat;
  cursor: pointer;
 } 
</style>
<body>
<div class="search">
 <input type="text" value="请输入..." id="txt"> //盒子架构div中一个文本框一个按钮
 <button id="btn"></button>
</div>
</body>

js部分：


<script>
  window.onload=function () {
   function $id(id) {
    return document.getElementById(id);
   } //虽然该案例中这种获取id方式比较麻烦但这是通常的一种方法避免一直去写获取
   $id("txt").onfocus=function () {
    if (this.value=="请输入..."){
     this.value=""; //这边是赋值别搞错了
     this.style.color="#333"; //黑色
    }
   } //当用户点击时初始文字消失
   $id("txt").onblur=function () {
    if (this.value==""){
     this.value="请输入..."
     this.style.color="#ccc"; //透明灰
    } //谁调用this指向谁
   }//当为空时用户点击其他地方显示初始化状态
  $id("btn").onclick=function () {
   alert("我可以点击");
  } //这边只是试验一下按钮功能还在不在
  }
 </script>

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

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部分有很大差异：


<script>
  window.onload=function () {
   function $id(id) {
    return document.getElementById(id);
   }
   $id("txt").oninput=function () { //判断用户输入栏是否为空来使得label是否消失
    if (this.value==""){
     $id("lab").style.display="block";
    }
    else {
     $id("lab").style.display="none";
    }
   }
  }
 </script>