JavaScript移动端模拟微信搜索框searchBar
效果展示：
- 初始状态，提示语居中，内容：icon+搜索
sb1
- 点击后获取焦点，icon靠右，右边出现取消按钮，点击取消恢复初始状态
sb2
- 输入内容后出现删除文字按钮，虚拟键盘出现搜索按钮
sb3
sb4
实现步骤：
第一步，提示语中包含icon图标并文字居中
由于input的placeholder并不可以添加图片，所以只能做一个假的placeholder
<i class='iconfont icon-sousuo'></i>
<div>搜索</div>
<input placeholder="搜索" />
第二步，操作过程的显示与隐藏
- 点击前先将input隐藏起来
- 点击时文字隐藏，input显示
- 输入时框右侧出现清除文字按钮，以及取消输入按钮
- 点击取消按钮恢复初始状态
使用flex布局和盒子模型box结构，能够解决多个块居中和水平分布问题
-webkit-box-flex: 1;
-ms-flex: 1;
display: -webkit-box;
display: -ms-flexbox;
-webkit-box-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
使用一个类来定义点击后的状态，通过添加删除这个类来控制各个块的显示隐藏切换
&.active{
.search__text{
display: none;
}
.search__input, .search__delete,.search__cancle{
display: block;
}
}
第三步，虚拟键盘上的搜索键显示
input中选择type=search，而且要在input外加上form标签，这样才能在虚拟键盘上显示搜索字样
<form autocomplete="off" class='search__input' onsubmit="return false" action=".">
<input
type='search'
placeholder="搜索 "
/>
</form>
以下是使用vue实现的完整代码：
<template>
<div class='search'>
<label class='search__container':class='{active:isActive}' >
<div class='search__body' @click="switchSearch">
<i class='search__icon iconfont icon-sousuo'></i>
<div class='search__text'>搜索</div>
<form autocomplete="off" class='search__input' onsubmit="return false" action=".">
<input
class='iconfont icon-sousuo'
type='search'
placeholder="搜索"
v-model="value"
@search="search"
/>
</form>
<i class='search__delete iconfont icon-shanchu' v-show='value' @click="clearInput"></i>
</div>
<div class='search__cancle' @click.prevent='cancle'>取消</div>
</label>
</div>
</template>
<script>
export default {
data () {
return {
isActive: false,
value: ''
}
},
methods: {
switchSearch () {
this.isActive = true
},
search () {
this.value = this.value.trim()
},
clearInput () {
this.value = ''
},
cancle () {
this.value = ''
this.isActive = false
}
}
}
</script>
<style lang="less">
input::-ms-clear,
input::-ms-reveal {
display: none;
}
input[type="search"]::-webkit-search-cancel-button {
display: none;
}
.search{
background-color: #41B883;
width: 100%;
height: .88rem;
z-index: 99;
.search__container{
display: -webkit-box;
display: -ms-flexbox;
.search__body{
height: .58rem;
line-height: .58rem;
margin: .14rem .24rem;
border-radius:2rem;
font-size: .24rem;
color:#768893;
background: #f4f6f9;
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1;
display: -webkit-box;
display: -ms-flexbox;
-webkit-box-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
.search__icon{
font-size: .24rem;
color:#768893;
vertical-align: middle;
margin-left: 0.2rem;
}
.search__text{
display: inline;
font-size: .24rem;
color:#768893;
line-height: 0.36rem;
padding-left: 0.1rem;
}
.search__input{
padding-left: 0.2rem;
-webkit-box-flex: 1;
color:#768893;
display: none;
overflow: hidden;
input{
width: 100%;
background: #f4f6f9;
letter-spacing: -0.14px;
border: 0;
-webkit-appearance: none;
font-size: 0.24rem;
color: #3F3F3F;
letter-spacing: -0.14px;
padding-left: 0.1rem;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
}
.search__delete{
display: none;
font-size: .3rem;
margin-right: 0.16rem;
}
}
.search__cancle{
display: none;
height: .58rem;
line-height: .58rem;
padding: .14rem .24rem .14rem 0;
border-radius:2rem;
font-size: .24rem;
color:#ffffff;
}
&.active{
.search__text{
display: none;
}
.search__input, .search__delete,.search__cancle{
display: block;
}
}
}
}
</style>
