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

資訊專欄INFORMATION COLUMN

前端培訓-初級階段-場景實戰(2019-05-09)-聊天框-發送框

wuyangchun / 3167人閱讀

摘要:初級階段已經完結,之后會針對之前提到過的內容,對實際場景進行分享。我們要講什么聊天功能中的發送框的實現及一些常規操作的實現。以下接口都從繼承其方法和屬性返回一個包含該節點名字的。是獲取剪貼板對象。所以不能直接人為替換剪貼板內容達到目的。

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS),本著提升技術水平,打牢基礎知識的中心思想,我們開課啦(每周四)。

初級階段已經完結,之后會針對之前提到過的內容,對實際場景進行分享。正好前段時間我不是一直在加班做聊天的功能嘛。今天我們就來說一說其中遇到的東西。

我們要講什么?

聊天功能中的發送框的實現及一些常規操作的實現。

contentEditable

Node 與 Element

插入功能(表情、截圖等等)

粘貼功能

拖入功能

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

關鍵詞 文字 換行 圖片
input × ×
textarea ×
contentEditable
contentEditable

你會說這東西我知道,給元素加上就可以編輯內容。老鐵,這么簡單當然不行了。

當你按下Enter/Return鍵在可編輯區域中創建一個新的文本行時,不同主流瀏覽器對此有不同處理(Firefox 插入
、IE/Opera將使用

、 Chrome/Safari 將使用

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

inherit(繼承);

initial(默認);

read-only(只讀);

read-write(讀寫);

read-write-plaintext-only(讀寫、非富文本);

unset(未設置);當一個屬性定義了unset值,如果該屬性是默認繼承屬性,該值等同于inherit,如果該屬性是非繼承屬性,該值等同于initial

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

當然我們用的還是富文本的樣式。因為我們里面需要表情

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

Node.nodeName
返回一個包含該節點名字的DOMString。節點的名字的結構和節點類型不同。
HTMLElement 的名字跟它所關聯的標簽對應,比如 HTMLAudioElement 對應的是 "audio"
Text 節點對應 "#text"
Document 節點對應 "#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

上面兩個屬于比較重要的

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

Node 中是會包含文本節點的。比如Text。
而 Element 包含的都是標簽節點。

插入功能

如果換成 DOM 操作,好像功能還蠻簡單的 appendChildinsertBeforereplaceChild好像就基本可以搞定了。但是換到富文本中呢?我們需要解決幾個問題

獲取當前焦點位置

在文本內容中插入內容

在節點內容中插入內容

其實還有一點,插入的時候會單擊其他位置,導致焦點丟失,所以我們需要記住,然后設置到指定位置。

獲取當前的焦點位置

window.getSelection();這個可以用來獲取焦點位置。
anchorNode 指向用戶開始選擇(按下鼠標鍵)的地方,而 focusNode 指向用戶結束選擇(松開鼠標鍵)的地方。
注意不能與選區的起始位置和終止位置混淆,因為開始選擇的位置可能在結束選擇位置的前面,也可能在結束選擇位置的后面,這取于選擇文本時鼠標移動的方向(也就是按下鼠標鍵和松開鼠標鍵的位置)
isCollapsed 布爾值,用于判斷選區的起始點和終點是否在同一個位置。

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

文本內容中插入內容

從上面的內容中,我們可以看到,在文本中是一個 Node 節點,那我應該如何插入節點呢?這其實就是調用 insertData 這個api就好了。但是,怎么能如此簡單呢?我們插入的是 DOM 而不是簡單的文本,所以這個操作不能用。

這里我們要用的其實是splitText,用于在焦點處分割開內容。然后再after增加內容。

在節點中插入內容

這個就比較簡單了。節點的話,直接加入進去就好了。因為節點不存在說中間插入。但是呢,當你在節點之后的時候,你需要獲取其中所有的 nodes 然后根據 offset找到點。childNodeschildren 該使用那個呢?這個就涉及到上面說到的 NodeElement 的區別,留個小作業,自己試一下吧。友情提示,報錯的時候記得看是不是 anchorNodeText 節點

記錄焦點位置&整合應用

既然點擊會失去焦點,那么我們在blur的時候記錄。然后給顯示回去就OK了。
測試地址,其實還有一個效果沒處理,那就是選區處理。可以當做一個課后作業。

粘貼功能

這個功能很坑,因為還是富文本。所以粘貼進來的是有樣式的。但是我們不需要樣式,所以我們要過濾掉所有的標簽。但是又因為我們可以復制粘貼圖片。所以我們需要過濾出來我們的圖片。
方案有兩種

獲取文本,圖片會變成alt屬性標識的值(我用的是這個)

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

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

tips:

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

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

拖拽功能

這個功能沒實現,感覺上很難,達不到原生的那種感覺,也有可能是我api沒找到,希望會的人告我一下
說一下我能給出的方案,因為不能 setData 所以方案還是考慮阻止默認的

分開處理,內部拖拽使用系統操作。外部拖拽禁止。

都使用自己的處理但是拿不到焦點,針對這個問題,可以做到增加提示,然后追加。

拖拽的話,可以有文件級別的。判斷如果是文本文件之類的,可以讀取文件內容。

后記

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

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

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

相關文章

  • 前端培訓-初級階段-場景實戰2019-05-09)-聊天-發送

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

    用戶83 評論0 收藏0
  • 前端培訓-初級階段-場景實戰2019-05-09)-聊天-發送

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

    Drummor 評論0 收藏0
  • 前端培訓-初級階段-場景實戰2019-05-30)-input 搜索如何防抖,如何處理中文輸入

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

    Yuanf 評論0 收藏0
  • 前端培訓-初級階段-場景實戰2019-05-30)-input 搜索如何防抖,如何處理中文輸入

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

    BDEEFE 評論0 收藏0

發表評論

0條評論

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