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