这是默认样式
这是聚焦后显示
这是输入内容
看着很简单对吧,我一开始也是这么想的,结果当我做起来我发现.....这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来了......
聚焦了,图标没有消失,文字没有向左对其...
还有这个
还有这个
第一次做微信小程序,救命阿救命阿....................
https://developers.weixin.qq.com/s/RQUYARmT74oP
你不是已经快写好了吗
https://developers.weixin.qq.com/s/NwTMWRm579oO
或许可以用伪类来实现
.search{position: relative;}
.search:before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: '\e60a 搜索'; font-family: ds; text-align: center;}
.search.focus:before{text-align: left}
.search.value:before{content: ''}
<input bindfocus="focus" bindblur="blur" bindinput="change" bindconfirm="confirm" model:value="{{ value }}" type="search" class="search {{ focus ? 'focus': '' }} {{ value.length ? 'value' : '' }}"></input>
通过2个事件控制 focus 的值, 不过在 ios 上输入拼音的过程还是会看到后面的文字