AI助手支持GPT4.0
如何实现一个input搜索框？How to implement an input search box?
如何实现一个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来了......
聚焦了，图标没有消失，文字没有向左对其...
还有这个
还有这个
第一次做微信小程序，救命阿救命阿....................
This is the default style. This is the display after focusing. This is the input content. It looks very simple, right? I thought so at the beginning. As a result, when I started to do it, I found that... This TM is ridiculous. First, let's talk about how I implemented it. The element is input, the image in the middle uses the background image, and the search position is placeholder. When focusing, I added a class to the input element, and then let text align: left; ，background- image:none; When "blue", I will judge whether the value in the box is not empty. If it is empty, I will remove that class, and it will return to the default style: Note: because I use the iPhone, so my own development and debugging are all the results of running on IOS wechat... IOS, focus I have to wait for the soft keyboard to be raised before triggering. That is, the cursor has already flashed there, but my event has not been triggered. As a result, I used bindtap to bind the click event. I think it's ok now. As a result, sometimes it doesn't focus on IOS!!!!!, When you click input, the events are triggered, the classes are added, but no soft keyboard is raised... So: I added this line this.setData ({isfocus: true}); < input focus = {isfocus} "... Omitting / > forcing focus is OK. Although it's a little delayed and a little stuck, it's barely realized.. Ready to submit for release review: the plan came with bugs... Focused, the icon didn't disappear, the text didn't turn left to it... And this and this first time to do wechat applet, help, help
https://developers.weixin.qq.com/s/NwTMWRm579oO