mui的input框在IOS系统下无法聚焦或点击多次才能聚焦

我在给公司的一个H5页面添加搜索框,前端原先就用的mui,正常添加input框后,手机测试出现了问题:

Android : input框有内容搜索跳转后,按返回键,input不能聚焦,键盘不弹出

IOS : 正常进入页面input框不能聚焦,键盘不弹出,多次点击可能会聚焦

代码如下:

搜索

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属性。

.mui-search.mui-placeholder{pointer-events: none;    }

3.input框没有添加 type 属性???

这个...看情况添加一个吧,text或者search