mui的input框在IOS系统中问题总结

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

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

问题：mui的input框的事件穿透,可能会导致上面描述的一些问题

解决：

1.css里可能写了-webkit-user-select:none，并且作用域覆盖到了input框。

解决方法 : 添加input全局css样式

input {
    -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或者其他

 

2.ios下的input输入框显示只显示一半

 

 

 解决：先设置input 的字体大小，且设置的字体不小于placeholder的字体大小

input{
  font-size:14px; color:#000;
}
input::-wbkit-input-placeholder{
  font-size:14px;
  color: #666666;
}

 

 3.input在ios存在重影边框问题

解决：设置input的outline和-webkit-appearance为none

input {
  outline: none;
  -webkit-appearance: none; 
}

 

 

标签：none,IOS,webkit,框在,input,mui
来源： https://www.cnblogs.com/helloyoyo/p/12559492.html