mui的input框在IOS系統(tǒng)下無(wú)法聚焦或點(diǎn)擊多次才能聚焦
我在給公司的一個(gè)H5頁(yè)面添加搜索框,前端原先就用的mui,正常添加input框后,手機(jī)測(cè)試出現(xiàn)了問(wèn)題:
Android : input框有內(nèi)容搜索跳轉(zhuǎn)后,按返回鍵,input不能聚焦,鍵盤不彈出
IOS : 正常進(jìn)入頁(yè)面input框不能聚焦,鍵盤不彈出,多次點(diǎn)擊可能會(huì)聚焦
代碼如下:
<div>
? ? ? ?
<a class="mui-btn mui-btn-link" style="float: right;width: 14.5%;height: 34px;" onclick="searchInputWay()">搜索</a>
? ? ? ?
<div class="mui-content-padded" style="margin: 5px;">
? ? ? ? ? ?
????<div class="mui-input-row mui-search" style="width: 86%">
? ? ? ? ? ? ? ?????????????<input type="search" id="searchInput" class="muiSearchInput mui-input-clear" placeholder="請(qǐng)輸入手機(jī)號(hào)碼" onchange="searchInputWay()">
? ? ? ? ? ?
????????</div>
? ? ? ?
????</div>
</div>
CSS如下:
.mui-search .mui-placeholder {
? ?font-size: 16px;
? ?line-height: 34px;
? ?position: absolute;
? ?z-index: 999;
? ?top: 0;
? ?right: 0;
? ?bottom: 0;
? ?left: 0;
? ?display: inline-block;
? ?height: 34px;
? ?text-align: center;
? ?color: #999;
? ?border: 0;
? ?border-radius: 6px;
? ?background: 0 0;
}
研究了一會(huì)兒覺(jué)得可能是 mui 的一些問(wèn)題,然后就去官網(wǎng)學(xué)習(xí)了一下
發(fā)現(xiàn)或許是mui的input框的事件穿透,可能會(huì)導(dǎo)致上面描述的一些問(wèn)題
最后整理了一下解決方法 ( PS:我的是第2種情況 ) :
1.css里可能寫了-webkit-user-select:none，并且作用域覆蓋到了input框。
解決方法 : css樣式修改為 -webkit-user-select:auto
2.在mui-search外面包含了mui-inner-wrap 。mui-placehold的絕對(duì)定位后在iOS端產(chǎn)生事件穿透。
解決方法 : 添加css樣式，設(shè)置pointer-events屬性。
<style>
? ?.mui-search .mui-placeholder { ? ? ? ?pointer-events: none;
? ?}</style>
3.input框沒(méi)有添加 type 屬性???
這個(gè)...看情況添加一個(gè)吧,text或者search
