可編輯DIV與移動端軟鍵盤兼容性問題彙總

此文復現的全部兼容性問題均爲如下狀況：

1. 騰訊X5內核

2. 全屏webview

 

問題以下：

1. IOS12 中軟鍵盤彈出致使頁面頂部截斷，而且沒法恢復。

解決方法：添加交互事件，調用本地方法，在鍵盤收起後執行頁面回滾操做。

bridgeClass.jsEventHook.keyboardWillShow = function () {
      // 添加flag 是由於 有多個空時，切換輸入框也會調用WillHide
      switchFlag = true;
};

bridgeClass.jsEventHook.keyboardWillHide = function() {
     switchFlag = false;
     setTimeout(() => {
        if (!switchFlag) {
             document.body.scrollTop = 0;
             document.body.style.height = document.body.clientHeight;
        }
     }, 50);
};

 

2. 頁面中有多個可編輯DIV時，點擊IOS系統中軟鍵盤左上方的上下箭頭會致使頁面佈局錯亂

解決方法： 利用樣式 user-modify 或者contentEditable，在總體頁面中通時只存在一個可編輯DIV，從而變向禁止IOS軟鍵盤的上下箭頭。

 

3. 獲取可編輯DIV內容時，除獲取到所需文本以外，空格可能會被解析爲UTF-8， 出現亂碼的狀況。

解決方法： 使用encodeURI鹼性轉碼，使用decodeURI或者decodeURIComponent獲取標籤的innerHTML內容並進行解碼。（前提須要將多餘的標籤過濾掉）

 

4. IOS使用中文輸入法輸入英文時會出現多餘的空格，而且出現亂碼的狀況。

解決方法： 同問題三的解決方法

 

5. 可編輯DIV在IOS中沒法經過調用focus使其獲取光標

在IOS系統中，沒法經過代碼主動觸發focus事件，只能經過用戶手動觸發

解決方法： 是哦那個window.navigator.userAgent 匹配 Safari 作相應的交互處理

 

6. 使用僞元素模擬placeholder效果

    .eidt-area__main:empty:before{
        content: attr(ph);
        color:#999;
        font-size: .427rem;
    }
    .eidt-area__main:focus:before{
        content: none;
    }

 

7.可編輯div中防止單個單詞過長，或單行英文過長致使佈局錯亂

word-wrap: wrap;
word-break:  keep-all;

 

8.在可編輯div中禁止右鍵彈出菜單活長按彈出菜單

爲可編輯div添加屬性 oncontextmenu="window.event.returnValue=false"

<div id="write-box" class="write-box" :class="{'write-box-over': wordCount > wordMax}" spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" ph="請在此處輸入你的答案" contenteditable="plaintext-only" onpaste="return false;" oncopy="return false;" oncut="return false" @input="checkInput" oncontextmenu="window.event.returnValue=false"></div>

 

9. 在文章中嵌入可編輯div致使編輯的文字和文章的文字水平未居中

在外層盒子中使用 vertical-align作垂直對齊設置

 

10.  需求： 在可編輯div輸入框光標後面顯示詞數

使用  :after 僞元素，爲可編輯DIV添加屬性count

    .write-box::after{
        content: attr(count);
        color: #999;
        font-size: 0.427rem;
        line-height: 0.4rem;
    }

 

11. 可編輯DIV光標定位至最後

let oDiv = document.querySelector('#write-box');
oDiv .focus();
var range = window.getSelection();//建立range
range.selectAllChildren(oDiv);//range 選擇obj下全部子內容
range.collapseToEnd();//光標移至最後