国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用contenteditable+div模擬textarea文本域實現高度自適應

seasonley / 1484人閱讀

摘要：使用該組件注意一個問題就是不要在可視化區域的節點上使用樣式，否則會出現當鼠標焦點小時光標和小水滴無法消失的情況地址項目地址參考鏈接模擬文本域輕松實現高度自適應如何讓元素只能輸入純文本

使用contenteditable+div模擬textarea文本域實現高度自適應

開發過程中由于需要在發送消息的時候需要有一個可以高度自適應的文本域，一開始是使用textarea并搭配auto-size插件來做到textarea的高度自適應，后來因為遇到一些問題，而且也多加了依賴缺乏可定制，所以決定使用contenteditable來實現。

contenteditable介紹

contenteditable屬性規定元素內容是否可編輯，是H5新增的屬性，支持情況相當好，基本上所有的瀏覽器都兼容。

語法：

實現主要代碼如下

代碼實現是基于vue來實現的。
html部分：

CSS部分

代碼解讀：

設置-webkit-user-modify屬性，是為了在剪切復制的時候會把剪切的內容的格式也一并帶過來，由于我們是仿寫textarea，是不支持富文本的，所以需要需要將內容格式化成文本格式，而該屬性在webkit內核下就可以達到我們的目的。

設置-webkit-user-select屬性，是為了解決在測試過程中出現部分IOS手機不支持contenteditable屬性的問題。

JS部分：

代碼解讀：

其中addEventPaste方法是為了解決非webkit內核對于-webkit-user-select屬性支持不好的問題。里面主要是監聽黏貼事件然后或者剪切板的文本內容然后再阻止黏貼事件，并將文本內容追加到光標中，并將光標移動到相應的位置。

其中replaceToBreak方法是為了解決在textarea中換行的問題，在該偽textarea中換行是會多帶帶將換行內容放到新的DIV中的，所以，當我們需要對該內容進行格式化處理才行。

this.$el.scrollIntoView的作用是為了當使用者將我們的輸入框是使用絕對定位放在頁面底部的時候而被虛擬鍵盤遮擋的問題。

issue

使用該組件注意一個問題就是不要在可視化區域的節點上使用-webkit-user-select: none樣式，否則會出現當鼠標焦點小時光標和小水滴無法消失的情況

github地址

github項目地址

參考鏈接

div模擬textarea文本域輕松實現高度自適應
如何讓contenteditable元素只能輸入純文本

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51437.html

相關文章

  • 使用contenteditable+div模擬textarea文本域實現高度自適應

    摘要：使用該組件注意一個問題就是不要在可視化區域的節點上使用樣式，否則會出現當鼠標焦點小時光標和小水滴無法消失的情況地址項目地址參考鏈接模擬文本域輕松實現高度自適應如何讓元素只能輸入純文本 使用contenteditable+div模擬textarea文本域實現高度自適應 開發過程中由于需要在發送消息的時候需要有一個可以高度自適應的文本域，一開始是使用textarea并搭配auto-size...

    Olivia 評論0 收藏0

  • textarea文域高度自適應

    摘要：高度自適應文本域高度隨內容自動變化，不會出現滾動條，可以有多種方法，除了用動態設置它的高度值以外還有其它更簡單的方法。還有一種方法，利用兄弟節點撐開父級高度，設置高度為即可。 textarea高度自適應 文本域高度隨內容自動變化，不會出現滾動條，可以有多種方法，除了用js動態設置它的高度值以外還有其它更簡單的方法。 可以用div標簽模擬textarea，將div的contentedit...

    hzx 評論0 收藏0

  • HTML contenteditable屬性

    摘要：前言之前一直沒有留意到有這個屬性，今天突然看到特意記錄一下它的用法和實際用途用法為了某個使元素可編輯，你所要做的就是在標簽上設置屬性，它幾乎支持所有的元素。 前言 之前一直沒有留意到有contenteditable這個屬性，今天突然看到特意記錄一下它的 用法 和 實際用途 ； 用法 為了某個使元素可編輯，你所要做的就是在html標簽上設置contenteditable屬性，它幾乎支持所...

    huayeluoliuhen 評論0 收藏0

  • HTML contenteditable屬性

    摘要：前言之前一直沒有留意到有這個屬性，今天突然看到特意記錄一下它的用法和實際用途用法為了某個使元素可編輯，你所要做的就是在標簽上設置屬性，它幾乎支持所有的元素。 前言 之前一直沒有留意到有contenteditable這個屬性，今天突然看到特意記錄一下它的 用法 和 實際用途 ； 用法 為了某個使元素可編輯，你所要做的就是在html標簽上設置contenteditable屬性，它幾乎支持所...

    jimhs 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<