html 输入框加搜索框,如何实现一个input搜索框？

这是默认样式

这是聚焦后显示

这是输入内容

看着很简单对吧，我一开始也是这么想的，结果当我做起来我发现.....这tm就离谱

先说下我怎么实现的，元素是input，中间的图片用背景图，搜索岗位是placeholder，

当focus时，我给input元素添加类，然后让text-align: left;，background-image:none;

当blur时，我再判断框内value是否不为空，如果为空，再把那个类去掉，他就会恢复默认样式

：注因为我用的iphone，所以我自己开发调试都是在ios的微信上跑的

结果......

IOS 上，focus 要等软键盘抬起了才触发，就是那光标已经在那闪了，但是我的事件没有触发，导致我用bindtap绑定了点击事件

我想这下没问题了吧....

结果....

IOS上，有时候不聚焦!!!!!, 明明点击了input，事件都触发了，类都添加上去了，结果没有软键盘抬起...

于是乎：我加了这么一行

this.setData({

isFocus: true

});

强制聚焦

这下没问题了吧，虽然有点延迟，有点卡顿的效果，但勉强算是实现了。。

准备提交发布审核：策划带着bug来了......

聚焦了，图标没有消失，文字没有向左对其...

还有这个

还有这个

第一次做微信小程序，救命阿救命阿....................