input框在IOS系统中问题总结

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

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

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

解决：

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

App.vue中设置了-webkit-user-select: none;影响到了input

解决方法 : 

*:not(input,textarea), *:before:not(input,textarea), *:after:not(input,textarea) {
    -webkit-user-select: none; 
  }

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

 4.检查是否使用了FastClick，如果使用了在main.js中增加以下代码即可。!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!我是这种情况

具体原因参考：fastclick解析与ios11.3相关bug原因分析

FastClick.prototype.focus = function(targetElement) {
        var length;
        //兼容处理:在iOS7中，有一些元素（如date、datetime、month等）在setSelectionRange会出现TypeError
        //这是因为这些元素并没有selectionStart和selectionEnd的整型数字属性，所以一旦引用就会报错，因此排除这些属性才使用setSelectionRange方法
        if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
            length = targetElement.value.length;
            targetElement.setSelectionRange(length, length);
            /*修复bug ios 11.3不弹出键盘，这里加上聚焦代码，让其强制聚焦弹出键盘*/
            targetElement.focus();
        } else {
            targetElement.focus();
        }
    };

 

 

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

 

 

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

input 里面的字体大小需要小于placeholder的字体大小，具体大多少需要真机调试

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

 

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

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

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