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

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

效果展示：

• 初始状态，提示语居中，内容：icon+搜索

sb1

• 点击后获取焦点，icon靠右，右边出现取消按钮，点击取消恢复初始状态

sb2

• 输入内容后出现删除文字按钮，虚拟键盘出现搜索按钮

sb3

sb4

实现步骤：

第一步，提示语中包含icon图标并文字居中

由于input的placeholder并不可以添加图片，所以只能做一个假的placeholder

搜索

第二步，操作过程的显示与隐藏

1. 点击前先将input隐藏起来
2. 点击时文字隐藏，input显示
3. 输入时框右侧出现清除文字按钮，以及取消输入按钮
4. 点击取消按钮恢复初始状态
   使用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标签，这样才能在虚拟键盘上显示搜索字样

以下是使用vue实现的完整代码：