收藏
回答

如何实现一个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

      });

<input focus="{{isFocus}}" ...省略/>

强制聚焦

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

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

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

还有这个

还有这个


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

回答关注问题邀请回答
收藏

4 个回答

  • Brother斌🎈
    Brother斌🎈
    2021-03-17

    https://developers.weixin.qq.com/s/RQUYARmT74oP

    你不是已经快写好了吗

    2021-03-17
    有用
    回复 1
    • asuka
      asuka
      2021-03-17
      感谢感谢,已经实现了
      2021-03-17
      回复
  • asuka
    asuka
    2021-03-17

    https://developers.weixin.qq.com/s/NwTMWRm579oO

    2021-03-17
    有用
    回复
  • Z
    Z
    2021-03-17

    搞一个代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2021-03-17
    有用
    回复 3
  • 小胡
    小胡
    2021-03-17

    或许可以用伪类来实现

    2021-03-17
    有用
    回复 3
    • asuka
      asuka
      2021-03-17
      还请细说
      2021-03-17
      回复
    • 小胡
      小胡
      2021-03-17回复asuka
      2021-03-17
      回复
    • asuka
      asuka
      2021-03-17回复小胡
      感谢感谢,不过我已经实现完了,这个方案我就保留备用了,谢谢谢谢
      2021-03-17
      回复
登录 后发表内容
问题标签