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

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

1. 騰訊X5內核html

2. 全屏webviewjava

問題以下：web

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

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

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軟鍵盤的上下箭頭。spa

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

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

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();//光標移至最後

原文出處：https://www.cnblogs.com/pomelott/p/10343107.html