动力节点旗下在线教育品牌  |  咨询热线:400-8080-105 学Java全栈,上蛙课网
首页 > 文章

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

08-23 11:14 619浏览
举报 T字号
  • 大字
  • 中字
  • 小字

我在给公司的一个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

2人推荐
共同学习,写下你的评论
0条评论
不写代码你养我啊
程序员不写代码你养我啊

3篇文章贡献11035字

作者相关文章更多>

推荐相关文章更多>

DOM渲染的详细过程

QCode09-04 14:38

CSS水平和垂直居中技巧大梳理

Code大师09-04 14:50

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

不写代码你养我啊08-23 11:14

推荐的-视.频播放器以及在线客服

不写代码你养我啊09-17 18:02

发评论

举报

0/150

取消