資訊專欄INFORMATION COLUMN
摘要：使用該組件注意一個問題就是不要在可視化區(qū)域的節(jié)點上使用樣式，否則會出現(xiàn)當鼠標焦點小時光標和小水滴無法消失的情況地址項目地址參考鏈接模擬文本域輕松實現(xiàn)高度自適應(yīng)如何讓元素只能輸入純文本
使用contenteditable+div模擬textarea文本域?qū)崿F(xiàn)高度自適應(yīng)
開發(fā)過程中由于需要在發(fā)送消息的時候需要有一個可以高度自適應(yīng)的文本域，一開始是使用textarea并搭配auto-size插件來做到textarea的高度自適應(yīng)，后來因為遇到一些問題，而且也多加了依賴缺乏可定制，所以決定使用contenteditable來實現(xiàn)。
contenteditable介紹contenteditable屬性規(guī)定元素內(nèi)容是否可編輯，是H5新增的屬性，支持情況相當好，基本上所有的瀏覽器都兼容。
語法：
實現(xiàn)主要代碼如下
代碼實現(xiàn)是基于vue來實現(xiàn)的。
html部分：
CSS部分
代碼解讀：
設(shè)置-webkit-user-modify屬性，是為了在剪切復制的時候會把剪切的內(nèi)容的格式也一并帶過來，由于我們是仿寫textarea，是不支持富文本的，所以需要需要將內(nèi)容格式化成文本格式，而該屬性在webkit內(nèi)核下就可以達到我們的目的。
設(shè)置-webkit-user-select屬性，是為了解決在測試過程中出現(xiàn)部分IOS手機不支持contenteditable屬性的問題。
JS部分：
代碼解讀：
其中addEventPaste方法是為了解決非webkit內(nèi)核對于-webkit-user-select屬性支持不好的問題。里面主要是監(jiān)聽黏貼事件然后或者剪切板的文本內(nèi)容然后再阻止黏貼事件，并將文本內(nèi)容追加到光標中，并將光標移動到相應(yīng)的位置。
其中replaceToBreak方法是為了解決在textarea中換行的問題，在該偽textarea中換行是會多帶帶將換行內(nèi)容放到新的DIV中的，所以，當我們需要對該內(nèi)容進行格式化處理才行。
this.$el.scrollIntoView的作用是為了當使用者將我們的輸入框是使用絕對定位放在頁面底部的時候而被虛擬鍵盤遮擋的問題。
issue使用該組件注意一個問題就是不要在可視化區(qū)域的節(jié)點上使用-webkit-user-select: none樣式，否則會出現(xiàn)當鼠標焦點小時光標和小水滴無法消失的情況
github地址github項目地址
參考鏈接div模擬textarea文本域輕松實現(xiàn)高度自適應(yīng)
如何讓contenteditable元素只能輸入純文本
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112648.html
摘要：使用該組件注意一個問題就是不要在可視化區(qū)域的節(jié)點上使用樣式，否則會出現(xiàn)當鼠標焦點小時光標和小水滴無法消失的情況地址項目地址參考鏈接模擬文本域輕松實現(xiàn)高度自適應(yīng)如何讓元素只能輸入純文本 使用contenteditable+div模擬textarea文本域?qū)崿F(xiàn)高度自適應(yīng) 開發(fā)過程中由于需要在發(fā)送消息的時候需要有一個可以高度自適應(yīng)的文本域，一開始是使用textarea并搭配auto-size...
摘要：高度自適應(yīng)文本域高度隨內(nèi)容自動變化，不會出現(xiàn)滾動條，可以有多種方法，除了用動態(tài)設(shè)置它的高度值以外還有其它更簡單的方法。還有一種方法，利用兄弟節(jié)點撐開父級高度，設(shè)置高度為即可。 textarea高度自適應(yīng) 文本域高度隨內(nèi)容自動變化，不會出現(xiàn)滾動條，可以有多種方法，除了用js動態(tài)設(shè)置它的高度值以外還有其它更簡單的方法。 可以用div標簽?zāi)Mtextarea，將div的contentedit...
摘要：前言之前一直沒有留意到有這個屬性，今天突然看到特意記錄一下它的用法和實際用途用法為了某個使元素可編輯，你所要做的就是在標簽上設(shè)置屬性，它幾乎支持所有的元素。 前言 之前一直沒有留意到有contenteditable這個屬性，今天突然看到特意記錄一下它的 用法 和 實際用途 ； 用法 為了某個使元素可編輯，你所要做的就是在html標簽上設(shè)置contenteditable屬性，它幾乎支持所...
摘要：前言之前一直沒有留意到有這個屬性，今天突然看到特意記錄一下它的用法和實際用途用法為了某個使元素可編輯，你所要做的就是在標簽上設(shè)置屬性，它幾乎支持所有的元素。 前言 之前一直沒有留意到有contenteditable這個屬性，今天突然看到特意記錄一下它的 用法 和 實際用途 ； 用法 為了某個使元素可編輯，你所要做的就是在html標簽上設(shè)置contenteditable屬性，它幾乎支持所...
閱讀 2031·2023-04-26 00:16
閱讀 3482·2021-11-15 11:38
閱讀 3175·2019-08-30 12:50
閱讀 3183·2019-08-29 13:59
閱讀 756·2019-08-29 13:54
閱讀 2503·2019-08-29 13:42
閱讀 3310·2019-08-26 11:45
閱讀 2193·2019-08-26 11:36
