我在给公司的一个H5页面添加搜索框,前端原先就用的mui,正常添加input框后,手机测试出现了问题:
Android : input框有内容搜索跳转后,按返回键,input不能聚焦,键盘不弹出
IOS : 正常进入页面input框不能聚焦,键盘不弹出,多次点击可能会聚焦
代码如下:
<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="请输入手机号码" 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; }研究了一会儿觉得可能是 mui 的一些问题,然后就去官网学习了一下
发现或许是mui的input框的事件穿透,可能会导致上面描述的一些问题
最后整理了一下解决方法 ( PS:我的是第2种情况 ) :
1.css里可能写了-webkit-user-select:none，并且作用域覆盖到了input框。
解决方法 : css样式修改为 -webkit-user-select:auto
2.在mui-search外面包含了mui-inner-wrap 。mui-placehold的绝对定位后在iOS端产生事件穿透。
解决方法 : 添加css样式，设置pointer-events属性。
<style> .mui-search .mui-placeholder { pointer-events: none; } </style>3.input框没有添加 type 属性???
这个...看情况添加一个吧,text或者search