H5手机搜索框的简单实现

最新推荐文章于 2025-03-21 09:03:23 发布

愤斗的小鲜肉

最新推荐文章于 2025-03-21 09:03:23 发布

阅读量9.7k

点赞数 5

分类专栏： # 移动前端

本文链接：https://blog.youkuaiyun.com/chengbao315/article/details/105549541

版权

移动前端专栏收录该内容

2 篇文章

订阅专栏

本文系原创，转载请注明出处：
https://blog.youkuaiyun.com/chengbao315/article/details/105549541

几乎所有的移动应用都有搜索功能，那么本文的目标就是实现这样的搜索框样式：在这里插入图片描述
当文本框内输入文本时，提示语隐藏，同时显示清空文本按钮；当没有输入时显示提示语，同时隐藏清空按钮。

一． HTML input 标签 placeholder属性

Placeholder属性具有显示提示语的性质，这样只需要处理搜索图标和删除文本按钮的显示即可。先用一个div 块作为搜索框外框，同时添加两个i标签，一个用于显示搜索图标，一个用于显示删除按钮，之后添加文本框作为搜索框，隐藏文本框外边框。

Html代码

<div class="search"> 
      <i class="glyphicon glyphicon-search icon"></i>
      <i class="glyphicon del"></i>
      <div>
        <input type="text" placeholder="请输入搜索商品" >
      </div>
   </div>

页面的结构非常简单，需要注意的是这里引入了bootstrap.min.css，因为bootstrap的字体图标很容易实现图标的显示，使用时只需要添类“glyphicon glyphicon-search”即可。

Css代码

.search{
 position: relative;
    color: gray;
    border: 1px solid gray;
    border-radius: 4px;
    height: 24px;
    width: 90%;
    margin: 10px auto;       
    overflow: hidden;
  }

  .search div{
   margin-left:30px;
   margin-right:30px;
  }

  input{
    margin-top: 1px;
    width: 100%;
    outline: none;
    border: none;
  }

  .icon{
    display: block;
    position: absolute;
    top: 5px;
    left: 10px;
    width: 20px;
    color: currentcolor;
    float: left;
  }

  .del{
    display: block;
    position: absolute;
    top: 5px;
    right: 10px;
    color: currentcolor;
    float: right;
  }

CSS代码主要就是处理搜索框的样式和布局，这里有两个注意的地方：

隐藏input外框： outline: none; border: none;
搜索文本框的宽度自适应

这里展开来讲一下文本框的自适应的原理，本文中搜索图标、清除图标各占据了固定的宽度尺寸，而中间的文本框时需要根据不同的手机宽度进行自适应的，这个需求首先让我想到的是宽度百分比，尝试了一下根本行不通，因为图标的宽度会随着手机宽度的增大而增大，并不是我想要的效果。那怎么办呢？这里我采用的是float左右浮动，配合margin左右固定距离的方式实现的。
两个图标的固定宽度是30px,分别使用左右浮动处理，中间的 input 标签放在一个div盒子里，距离左右距离为30px，以上就实现了想要的效果。
有的时候，我们需要的搜索框是下面这样的，右边距离固定，左边区域自适应宽度：

这样的效果怎么实现呢？原理跟本文的一样，让取消文本向右浮动，左侧盒子距离右侧固定距离即可。

二．交互

实现了样式，接下来就要实现与用户的交互。

1.文本输入显示清除按钮
Input标签的oninput事件可以实现输入文本时触发事件，不需要失去焦点，input还有一个onchange事件，这个事件需要失去焦点才能触发。这里使用了oninput事件，但是需要注意从脚本中修改值不会触发事件。

JavaScript代码：

function getValue(){   
    var text = document.getElementById("q").value;
    if(text!=""){
      document.getElementsByClassName("del")[0].setAttribute("class","glyphicon glyphicon-remove-circle del");
    }
    else{
      document.getElementsByClassName("del")[0].setAttribute("class","glyphicon del");
    }
  }

在html代码中给input标签添加事件，触发getValue方法，在方法中获取文本值，判断文本值不为空，给i标签添加类glyphicon-remove-circle，即可显示清除按钮。

2.清除操作
给i标签添加click事件，触发delValue方法，在方法中进行清除input文本操作。注意清除后将按钮设置为不可见，因为脚本修改文本不能触发input标签的oninput事件。

JavaScript代码：

function delValue(){
    document.getElementById("q").value = "";
    document.getElementsByClassName("del")[0].setAttribute("class","glyphicon del");
  }

以上就是搜索框的样式实现，最后注意一点，移动端开发需要在 head标签中以下配置，以适应移动端设备的显示：
<metaname=“viewport” content=“width=device-width”>

3.移动端搜索类型
移动端的搜索文本框，手机输入法通常都会有一个搜索按钮，如下图所示：

这个是怎么实现的？其实很简单，这是H5新增的属性，将 input 的 type 属性设置为 “search” 即可实现。
点击搜索按钮后，前端需要进行相应的搜索操作，这里是通过监听键盘输入事件实现的，代码如下：

var search = document.getElementById('q');
search.onkeypress = function(e){
    if(e.keyCode === 13){
      alert('正在执行搜索操作');
          }
  }

搜索键的键值是13，判断键盘输入键值为13时即进行搜索操作。

如果本文有帮到你，记得加关注哦
源码地址：https://download.youkuaiyun.com/download/chengbao315/12330331
————————————————
版权声明：本文为优快云博主「愤斗的程序猿」的原创文章，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/chengbao315/article/details/105549541