問題一: ios中input的兼容性問題
問題描述:使用了vux的search組件,在網頁顯示正常,在ios系統中打開搜索框會變高,並且輸入文字,不會顯示文字,但是點擊搜索會將正確的結果顯示出來(可能是由於line-height引起的,給 input 添加一個 line-height:normal屬性解決)。
解決:光標聚焦導致變高,具體原因還沒找到,所以手寫了一個搜索框,具體代碼如下。一個原生的input標籤,用帶action屬性的form標籤包裹起來,使手機鍵盤迴車按鈕提示顯示爲“搜索”。
<form action="javascript:;" class="searchForm" id="searchForm">
<label>
<icon type="search"></icon>
</label>
<!-- autocomplete="off" 該屬性設置將默認的下拉框顯示搜索歷史記錄去掉; -->
<input type="search" @keyup.enter="getResult" @input="getResult" autocomplete="off" class="inputSearch" v-model="value" :results="results" placeholder="請輸入景區名稱">
</form>
問題二:line-height不能居中顯示
解決:使用flex佈局中的align-items:center垂直居中,或者position+transform/負的margin。也可以將line-height設爲normal,再使用padding垂直居中對齊