先上一張圖
圖1-1
如圖1-1所示，想做一個上面圖片上的搜索框，很容易想到上面搜索框的布局方式就是，input框占滿整個行間，然后清空按鈕通過absolute定位到input框上面，然而這樣的布局方式在小程序真機測試中是有問題的，問題描述如下：
問題所在： 當input框處于聚焦狀態(tài)時，及鍵盤屬于拉起狀態(tài)。點擊清空按鈕是無法清空input框里的數(shù)據(jù)的，簡單的說就是此時加在清空按鈕上的點擊，觸摸等事件并不會觸發(fā)。只有當input框失去焦點時及鍵盤屬于隱藏狀態(tài)時，清空按鈕上的事件才能被觸發(fā)。
原因所在：小程序中當input框?qū)儆诰劢範顟B(tài)時，會有個層級的提升，它的層級是最高的，會比覆蓋在他上面的標簽層級高，因此此時點擊清空按鈕時實際上點擊的還是input框。只有當input框失去焦點時才會恢復到正常的層級，此時上面的覆蓋標簽會比input框?qū)蛹壐?/p>
當初以為是組件問題，結果采用小程序上的cover-image，cover-image組件也無法解決問題。
解決辦法：
圖1-2
因此我們得使用圖1-2的布局方式，采用正常的左右布局的方式。input框和按鈕各占整行的一部分，然后通過css去使input框看上去是占用一整行，清空按鈕覆蓋在上面，對于前端人員來說還是很好寫的哈。
