成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端培訓(xùn)-初級階段-場景實(shí)戰(zhàn)（2019-05-09）-聊天框-發(fā)送框

Drummor / 646人閱讀

摘要：初級階段已經(jīng)完結(jié)，之后會針對之前提到過的內(nèi)容，對實(shí)際場景進(jìn)行分享。我們要講什么聊天功能中的發(fā)送框的實(shí)現(xiàn)及一些常規(guī)操作的實(shí)現(xiàn)。以下接口都從繼承其方法和屬性返回一個(gè)包含該節(jié)點(diǎn)名字的。是獲取剪貼板對象。所以不能直接人為替換剪貼板內(nèi)容達(dá)到目的。

前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識的中心思想，我們開課啦（每周四）。

初級階段已經(jīng)完結(jié)，之后會針對之前提到過的內(nèi)容，對實(shí)際場景進(jìn)行分享。正好前段時(shí)間我不是一直在加班做聊天的功能嘛。今天我們就來說一說其中遇到的東西。

我們要講什么？

聊天功能中的發(fā)送框的實(shí)現(xiàn)及一些常規(guī)操作的實(shí)現(xiàn)。

contentEditable

Node 與 Element

插入功能（表情、截圖等等）

粘貼功能

拖入功能

測試地址-測試下面的特性

關(guān)鍵詞 文字 換行 圖片
input √ × ×
textarea √ √ ×
contentEditable √ √ √
contentEditable

你會說這東西我知道，給元素加上就可以編輯內(nèi)容。老鐵，這么簡單當(dāng)然不行了。

當(dāng)你按下Enter/Return鍵在可編輯區(qū)域中創(chuàng)建一個(gè)新的文本行時(shí)，不同主流瀏覽器對此有不同處理(Firefox 插入
、IE/Opera將使用

、 Chrome/Safari 將使用

）

css 也可以支持同樣的功能-webkit-user-modify，值有

inherit（繼承）;

initial（默認(rèn)）;

read-only（只讀）;

read-write（讀寫）;

read-write-plaintext-only（讀寫、非富文本）;

unset（未設(shè)置）;當(dāng)一個(gè)屬性定義了unset值，如果該屬性是默認(rèn)繼承屬性，該值等同于inherit，如果該屬性是非繼承屬性，該值等同于initial

同上 contentEditable 屬性支持的也不是邏輯值。plaintext-only 就是其中最亮的仔。
最早還是在張鑫旭大佬-小tip: 如何讓contenteditable元素只能輸入純文本哪里看的到的

當(dāng)然我們用的還是富文本的樣式。因?yàn)槲覀兝锩嫘枰砬?/p> Node 與 Element Node 

Node 是一個(gè)接口，許多 DOM API 對象的類型會從這個(gè)接口繼承。它允許我們使用相似的方式對待這些不同類型的對象；比如, 繼承同一組方法，或者用同樣的方式測試。
以下接口都從 Node 繼承其方法和屬性：
Document, Element, Attr, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference
-----------------https://developer.mozilla.org...

Node.nodeName
返回一個(gè)包含該節(jié)點(diǎn)名字的DOMString。節(jié)點(diǎn)的名字的結(jié)構(gòu)和節(jié)點(diǎn)類型不同。
HTMLElement 的名字跟它所關(guān)聯(lián)的標(biāo)簽對應(yīng)，比如 HTMLAudioElement 對應(yīng)的是 "audio"
Text 節(jié)點(diǎn)對應(yīng) "#text"。
Document 節(jié)點(diǎn)對應(yīng) "#document"。

Node.nodeType

Name Value status
ELEMENT_NODE 1
ATTRIBUTE_NODE 2 warn
TEXT_NODE 3
CDATA_SECTION_NODE 4
ENTITY_REFERENCE_NODE 5 warn
ENTITY_NODE 6 warn
PROCESSING_INSTRUCTION_NODE 7
COMMENT_NODE 8
DOCUMENT_NODE 9
DOCUMENT_TYPE_NODE 10
DOCUMENT_FRAGMENT_NODE 11
NOTATION_NODE 12 warn

上面兩個(gè)屬于比較重要的

Element 
Element是非常通用的基類，所有 Document對象下的對象都繼承它. 這個(gè)接口描述了所有相同種類的元素所普遍具有的方法和屬性。 這些繼承自Element并且增加了一些額外功能的接口描述了具體的行為. 例如,  HTMLElement 接口是所有HTML元素的基礎(chǔ)接口， 而 SVGElement 接口是所有SVG元素的基本接口.大多數(shù)功能在類的層次中進(jìn)一步制定.
在web以外的語言,像 XUL 可以通過 XULElement 接口, 同樣也實(shí)現(xiàn)了Element接口.
Node 與 Element 差別

Node 中是會包含文本節(jié)點(diǎn)的。比如Text。
而 Element 包含的都是標(biāo)簽節(jié)點(diǎn)。

插入功能

如果換成 DOM 操作，好像功能還蠻簡單的 appendChild、insertBefore、replaceChild好像就基本可以搞定了。但是換到富文本中呢？我們需要解決幾個(gè)問題

獲取當(dāng)前焦點(diǎn)位置

在文本內(nèi)容中插入內(nèi)容

在節(jié)點(diǎn)內(nèi)容中插入內(nèi)容

其實(shí)還有一點(diǎn)，插入的時(shí)候會單擊其他位置，導(dǎo)致焦點(diǎn)丟失，所以我們需要記住，然后設(shè)置到指定位置。

獲取當(dāng)前的焦點(diǎn)位置

window.getSelection();這個(gè)可以用來獲取焦點(diǎn)位置。
anchorNode 指向用戶開始選擇(按下鼠標(biāo)鍵)的地方，而 focusNode 指向用戶結(jié)束選擇(松開鼠標(biāo)鍵)的地方。
注意不能與選區(qū)的起始位置和終止位置混淆，因?yàn)殚_始選擇的位置可能在結(jié)束選擇位置的前面，也可能在結(jié)束選擇位置的后面，這取于選擇文本時(shí)鼠標(biāo)移動(dòng)的方向（也就是按下鼠標(biāo)鍵和松開鼠標(biāo)鍵的位置）。
isCollapsed 布爾值，用于判斷選區(qū)的起始點(diǎn)和終點(diǎn)是否在同一個(gè)位置。

//可以用這段代碼來觀察
setInterval(()=>{
    var selection=window.getSelection();
    console.log(selection)
},1000)

文本內(nèi)容中插入內(nèi)容

從上面的內(nèi)容中，我們可以看到，在文本中是一個(gè) Node 節(jié)點(diǎn)，那我應(yīng)該如何插入節(jié)點(diǎn)呢？這其實(shí)就是調(diào)用 insertData 這個(gè)api就好了。但是，怎么能如此簡單呢？我們插入的是 DOM 而不是簡單的文本，所以這個(gè)操作不能用。

這里我們要用的其實(shí)是splitText，用于在焦點(diǎn)處分割開內(nèi)容。然后再after增加內(nèi)容。

在節(jié)點(diǎn)中插入內(nèi)容

這個(gè)就比較簡單了。節(jié)點(diǎn)的話，直接加入進(jìn)去就好了。因?yàn)楣?jié)點(diǎn)不存在說中間插入。但是呢，當(dāng)你在節(jié)點(diǎn)之后的時(shí)候，你需要獲取其中所有的 nodes 然后根據(jù) offset找到點(diǎn)。childNodes 和children 該使用那個(gè)呢？這個(gè)就涉及到上面說到的 Node 和 Element 的區(qū)別，留個(gè)小作業(yè)，自己試一下吧。友情提示，報(bào)錯(cuò)的時(shí)候記得看是不是 anchorNode 為 Text 節(jié)點(diǎn)。

記錄焦點(diǎn)位置&整合應(yīng)用

既然點(diǎn)擊會失去焦點(diǎn)，那么我們在blur的時(shí)候記錄。然后給顯示回去就OK了。
測試地址，其實(shí)還有一個(gè)效果沒處理，那就是選區(qū)處理?？梢援?dāng)做一個(gè)課后作業(yè)。

粘貼功能

這個(gè)功能很坑，因?yàn)檫€是富文本。所以粘貼進(jìn)來的是有樣式的。但是我們不需要樣式，所以我們要過濾掉所有的標(biāo)簽。但是又因?yàn)槲覀兛梢詮?fù)制粘貼圖片。所以我們需要過濾出來我們的圖片。
方案有兩種

獲取文本，圖片會變成alt屬性標(biāo)識的值（我用的是這個(gè)）

獲取HTML，需要自己去過濾處理。

粘貼進(jìn)來的內(nèi)容，我們需要處理 paste 事件。 e.clipboardData 是獲取剪貼板對象。提供了 getData 來獲取剪貼板內(nèi)容。比如 getData("text"); 獲取文字內(nèi)容。getData("text/html"); 獲取html格式內(nèi)容。

tips：

可以復(fù)制單圖片。會在粘貼板中 files 里面。

不可以執(zhí)行 setData 方法，看上去是瀏覽器廠商出于安全方向考慮。所以不能直接人為替換剪貼板內(nèi)容達(dá)到目的。那么我們要注意 e.preventDefault();，用來阻止默認(rèn)的事件。

拖拽功能

這個(gè)功能沒實(shí)現(xiàn)，感覺上很難，達(dá)不到原生的那種感覺，也有可能是我api沒找到，希望會的人告我一下。
說一下我能給出的方案，因?yàn)椴荒?setData 所以方案還是考慮阻止默認(rèn)的

分開處理，內(nèi)部拖拽使用系統(tǒng)操作。外部拖拽禁止。

都使用自己的處理但是拿不到焦點(diǎn)，針對這個(gè)問題，可以做到增加提示，然后追加。

拖拽的話，可以有文件級別的。判斷如果是文本文件之類的，可以讀取文件內(nèi)容。

后記

主講人文章-瀏覽器科普
感謝評論區(qū)的回復(fù)， document?.exec?Command --MDN 的支持用起來的確會少控制一些邏輯。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114625.html

相關(guān)文章

  • 前端培訓(xùn)-初級階段-場景實(shí)戰(zhàn)（2019-05-09）-聊天框-發(fā)送框

    摘要：初級階段已經(jīng)完結(jié)，之后會針對之前提到過的內(nèi)容，對實(shí)際場景進(jìn)行分享。我們要講什么聊天功能中的發(fā)送框的實(shí)現(xiàn)及一些常規(guī)操作的實(shí)現(xiàn)。以下接口都從繼承其方法和屬性返回一個(gè)包含該節(jié)點(diǎn)名字的。是獲取剪貼板對象。所以不能直接人為替換剪貼板內(nèi)容達(dá)到目的。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（H...

    wuyangchun 評論0 收藏0

  • 前端培訓(xùn)-初級階段-場景實(shí)戰(zhàn)（2019-05-09）-聊天框-發(fā)送框

    摘要：初級階段已經(jīng)完結(jié)，之后會針對之前提到過的內(nèi)容，對實(shí)際場景進(jìn)行分享。我們要講什么聊天功能中的發(fā)送框的實(shí)現(xiàn)及一些常規(guī)操作的實(shí)現(xiàn)。以下接口都從繼承其方法和屬性返回一個(gè)包含該節(jié)點(diǎn)名字的。是獲取剪貼板對象。所以不能直接人為替換剪貼板內(nèi)容達(dá)到目的。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（H...

    用戶83 評論0 收藏0

  • 前端培訓(xùn)-初級階段-場景實(shí)戰(zhàn)（2019-05-30）-input 搜索如何防抖，如何處理中文輸入

    摘要：在掘金摸魚的時(shí)候看到了一個(gè)題第題搜索如何防抖，如何處理中文輸入，感覺挺有意思的。測試地址事件輸入法事件輸入法的第一個(gè)字母時(shí)觸發(fā)。輸入法狀態(tài)輸入內(nèi)容。輸入法選擇之后觸發(fā)。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識的中心思想，我...

    Yuanf 評論0 收藏0

  • 前端培訓(xùn)-初級階段-場景實(shí)戰(zhàn)（2019-05-30）-input 搜索如何防抖，如何處理中文輸入

    摘要：在掘金摸魚的時(shí)候看到了一個(gè)題第題搜索如何防抖，如何處理中文輸入，感覺挺有意思的。測試地址事件輸入法事件輸入法的第一個(gè)字母時(shí)觸發(fā)。輸入法狀態(tài)輸入內(nèi)容。輸入法選擇之后觸發(fā)。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識的中心思想，我...

    BDEEFE 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<