這是默認(rèn)樣式

這是聚焦后顯示

這是輸入內(nèi)容

看著很簡(jiǎn)單對(duì)吧，我一開始也是這么想的，結(jié)果當(dāng)我做起來我發(fā)現(xiàn).....這tm就離譜

先說下我怎么實(shí)現(xiàn)的，元素是input，中間的圖片用背景圖，搜索崗位是placeholder，

當(dāng)focus時(shí)，我給input元素添加類，然后讓text-align: left;，background-image:none;

當(dāng)blur時(shí)，我再判斷框內(nèi)value是否不為空，如果為空，再把那個(gè)類去掉，他就會(huì)恢復(fù)默認(rèn)樣式

：注因?yàn)槲矣玫膇phone，所以我自己開發(fā)調(diào)試都是在ios的微信上跑的

結(jié)果......

IOS 上，focus 要等軟鍵盤抬起了才觸發(fā)，就是那光標(biāo)已經(jīng)在那閃了，但是我的事件沒有觸發(fā)，導(dǎo)致我用bindtap綁定了點(diǎn)擊事件

我想這下沒問題了吧....

結(jié)果....

IOS上，有時(shí)候不聚焦!!!!!, 明明點(diǎn)擊了input，事件都觸發(fā)了，類都添加上去了，結(jié)果沒有軟鍵盤抬起...

于是乎：我加了這么一行

this.setData({

isFocus:?true

});

強(qiáng)制聚焦

這下沒問題了吧，雖然有點(diǎn)延遲，有點(diǎn)卡頓的效果，但勉強(qiáng)算是實(shí)現(xiàn)了。。

準(zhǔn)備提交發(fā)布審核：策劃帶著bug來了......

聚焦了，圖標(biāo)沒有消失，文字沒有向左對(duì)其...

還有這個(gè)

還有這個(gè)

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

總結(jié)

以上是生活随笔為你收集整理的html 输入框加搜索框,如何实现一个input搜索框？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。