H5手机搜索框的简单实现

本文系原创，转载请注明出处：
https://blog.csdn.net/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.csdn.net/download/chengbao315/12330331
————————————————
版权声明：本文为CSDN博主「愤斗的程序猿」的原创文章，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/chengbao315/article/details/105549541

H5手机搜索框的简单实现相关推荐

型数据保留几位小数_Python数据分析—数据框的简单操作
本文是数据分析的第三课,教大家如何在python中对数据框进行简单操作,包括更改列名.显示某列中的部分字符.对某列的数值型数据进行取整等. 本文目录更改列名显示某列中的部分字符抽取某列的部分字符 ...
php删除记录前的判断弹窗,thinkPHP删除前弹出确认框的简单实现方法
这篇文章主要介绍了thinkPHP删除前弹出确认框的简单实现方法,结合实例形式分析了thinkPHP前台HTML部分结合js控制弹出框效果,以及后台控制器的删除数据处理功能,需要的朋友可以参考下本文 ...
Group Box组合框的简单使用 [大三TJB_708]
http://blog.csdn.net/misskissc/article/details/9317783 Group Box组合框的简单使用 [大三TJB_708] 转载于:https://www ...
html 12306页面实现,jQuery模拟12306城市选择框功能简单实现方法示例
本文实例讲述了jQuery模拟12306城市选择框功能简单实现方法.分享给大家供大家参考,具体如下: www.jb51.net jQuery城市选择框 #parent{ width:500px; po ...
Android中MaterialSearchView(搜索框)的简单实用
Android中MaterialSearchView(搜索框)的简单实用收搜框架有好多,动画效果满炫酷的就是代码太多,没发抽取他的搜索功能,而这个却比较好用些,直接从代码里面抠出来一个简单实现搜索功 ...
xd使用技巧_XD拉框助手怎么使用 XD拉框助手简单使用方法分享
XD拉框助手怎么使用?XD拉框助手是一款好用的PC端Adobe XD的拉框插件,通过本软件可以能够快速的生成折线图.柱状图.饼图.雷达图.全国各省市的地图,有的朋友可能还不知道应该如何使用?今天,小编 ...
Python数据分析—数据框的简单操作
本文是数据分析的第三课,教大家如何在python中对数据框进行简单操作,包括更改列名.显示某列中的部分字符.对某列的数值型数据进行取整等. 文章目录 1 更改列名 2 显示某列中的部分字符 ...
基于列表框的简单选课窗体开发。编写Windows应用程序，设计实现一个简单选课系统，要求：（1）点击“添加”按钮，将把在第一文本框中的输入的课程名称添加到左边的列表框中，且所添加的课程不能为空，不能
基于列表框的简单选课窗体开发.编写Windows应用程序,设计实现一个简单选课系统,要求: (1)点击"添加"按钮,将把在第一文本框中的输入的课程名称添加到左边的列表框中,且所添加 ...
html的textarea标签的文本显示，文本框样式简单设置
html的textarea标签的文本显示,文本框样式简单设置后端传递数据如何在textarea标签的文本框内显示,如下. <textarea id="text" type= ...

H5手机搜索框的简单实现

H5手机搜索框的简单实现相关推荐

最新文章

热门文章