這是默認樣式

這是聚焦后顯示

這是輸入內容

看著很簡單對吧，我一開始也是這么想的，結果當我做起來我發現.....這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來了......

聚焦了，圖標沒有消失，文字沒有向左對其...

還有這個

還有這個

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。