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>

easonhuang123 / blog

JavaScript移动端模拟微信搜索框searchBar #4

JavaScript移动端模拟微信搜索框searchBar