使用很簡單，一個普通的block元素上加個contenteditable=”true”

div 可以實現模擬textarea, span 可以實現模擬input

問題： ios 點選無法獲得焦點，點選沒有反應。android手機能夠點選並進行輸入。
解決： ios文字無法輸入，新增style=”-webkit-user-select:text”，如果引用了fastclick.js檔案，需要給div加上needsclick的class，例如< div class=”needsclick”>不然也無法輸入。

頁面結構

<div contenteditable class
 
="text needsclick" id="content" :class="inputClassObj" @focus="getFocus" @blur="getBlur" style="-webkit-user-select:text" @input="changeVal">請輸入文字<!-- {{placeholderText}} --></div>

互動

        /* div 模擬 輸入框 */
        getFocus (val) {
            console.log(123456);
            if (!this
 
.inputText) {
                val.target.innerText = '';
                // this.placeholderText = '';
            }
        },
        getBlur (val) {
            console.log(11111);
            if (val.target.innerText == '') {
                val.target.innerText = '請輸入文字';
                // this.placeholderText = '請輸入文字';
 

            }
        },
        changeVal(val) {
            this.inputText = val.target.innerText;
            console.log('this.inputText==>', this.inputText)
        },

修飾

    .text {
        width: r(670);
        height: auto;
        min-height: r(160);
        max-height: r(200);
        border: r(1) solid #cecece;
        font-size: r(24);
        text-align: justify;
        overflow-y: auto;
        outline: none;
        margin: 0 auto;
        margin-top: r(100);
    }
    .placeholderClass {
        color: #ccc;
    }

使用很簡單，一個普通的block元素上加個contenteditable=”true”就ok了,如下：

    <div class="test_box" contenteditable="true" style="-webkit-user-select:text"><br /></div> 
    .test_box {
        width: 400px; 
        min-height: 120px; 
        max-height: 300px;
     }

出現的問題和解決方案：

1.ios文字無法輸入，新增style=”-webkit-user-select:text”，如果引用了fastclick.js檔案，需要給div加上needsclick的class，例如< div class=”needsclick”>不然也無法輸入。

2.如果只想輸入純文字，使用：-webkit-user-modify: read-write-plaintext-only。

3.ios發現換行游標不移動，與mui.css衝突，新增*{-webkit-user-select:auto;}

4、 現代瀏覽器如Firefox在可編輯模式下的div獲取焦點的時候會有虛框，而實際上textarea是沒有虛框顯示的，此跡象會暴露出div是個冒牌貨，所以，需要新增下面的樣式：outline:0;

5、 Firefox瀏覽器下可編輯模式的div如果內部元素是空空的，那麼其在獲取焦點是時候，游標不可見或是與外部div齊高，這也是會暴露出自己是textarea冒牌貨的，所以，預設情況下，我們可以在此div中增加一個孤單的
換行標籤。但是，IE8下，如果有個預設的br標籤，游標位置可能會在第二行閃來閃去，所以，IE8下可編輯div裡面預設是不能有br標籤的，這個嘛，您自己想辦法清掉吧。

6、 IE瀏覽器下（IE6~8），輸入文字回車的時候，div內部是會自動產生p標籤包含每行元素的，而其他瀏覽器貌似是產生br標籤（這裡尚未全部測試，如有不準，歡迎指正）。由於預設的p標籤是有1em大小的上下margin值的，為了效果統一，我們可以設定諸如下面的樣式清除p標籤的margin值：.test_box p{ margin: 0; }

7、可編輯模式的div輸入的內容都會是很正宗的HTML程式碼，如果作為內容提交的話需要進行HTML字元過濾。還有，如果您是從其他頁面上拷貝一段內容過來，然後貼上到可編輯模式下的div中，會連HTML也完整的複製過來的（不同於textarea），所以，這裡也有必要進行HTML字元過濾（例如web QQ）。

8、 IE6瀏覽器不支援max-height屬性，所以，只用CSS是無法實現超過一定高度出現滾動條的效果，需要js配合實現。

9、 可編輯模式的div標籤與textarea一樣，是支援focus, blur事件的。自然也支援focus偽類，demo頁面中Firefox等現代瀏覽器獲取焦點時的外發光就是使用的:focus。

10.指令碼控制自動獲取焦點：

var editor = document.getElementById('#div');
editor.onfocus = function () {
  window.setTimeout(function () {
    var sel,range;
    if (window.getSelection && document.createRange) {
      range = document.createRange();
      range.selectNodeContents(editor);
      range.collapse(true);
      range.setEnd(editor, editor.childNodes.length);
      range.setStart(editor, editor.childNodes.length);
      sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
    } else if (document.body.createTextRange) {
      range = document.body.createTextRange();
      range.moveToElementText(editor);
      range.collapse(true);
      range.select();
    }
  }, 1);
}

editor.focus()