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; 
}