輸入框插入表情的實現

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

在普通的 textarea 中,只能顯示普通的文字。如果簡單的輸入文字,textarea 便足以勝任。但是實際情況往往要複雜得多。

簡單版本的插入表情

常見的版本一般都是使用 textarea,然後表情使用某種約定的文字格式代替,比如“你好啊[微笑]”。在呈現的時候,通過固定的文字解析方法將內容中的表情文字替換成圖片。新浪微博中發微博的輸入框就是如此。但是,在這有一點需要注意,如果只是簡單的在文字的最後插入表情之類的預定好的文字格式,只需獲取到到 textarea 的 value 然後做加法即可。

let editor = document.querySelect('#editor');
editor.value  = '[微笑]';

沒你想的這麼簡單

但實際情況卻沒有這麼簡單,因為使用者可以自己選擇游標的位置。當使用者在某一段文字中間插入游標之後,可不是簡單的加法了。在這種情況下,需要獲取到游標所在位置,在這個位置上插入用來代替表情的文字,然後將游標設定到表情文字的後面。在這需要兩個額外的方法:getCaretPosition

說到這你可能要問了,這個游標有啥關係啊?別急,聽我慢慢說。既然上述兩個設定不同數字可以選擇文字,那如果兩個值設定成相同的數字,會怎麼樣呢?

// 從第三個字元開始選中零個字元
editor.selectionStart = 2;
editor.selectionEnd = 2;

起點和終點重合了!那麼換個角度來描述就是:當我們在獲取游標位置的時候,其實就是選中的文字範圍起點和重點重合,相當於文字範圍的起點偏移量其實就是游標所在的位置偏移量,所以此時selectionStart

設定游標位置思路類似,但是程式碼稍有不同:

let range = editor.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();

總的來說,在 textarea 中獲取和設定游標位置還是蠻簡單的。講到這裡了,我想插入表情應該是很輕鬆的一件事情了

獲取游標位置(文字範圍前後重疊) -> 修改文字範圍(或者手動拼接) -> 重新設定游標位置 

至此,表情插入功能的基本實現。

還沒結束

上述例子中,在輸入框中表情只能以文字的形式呈現。如果想在輸入框中呈現輸入的表情,該怎麼辦呢?使用 contenteditable 屬性為 true 的容器代替 textarea 是必須的,因為 textarea 中只能顯示文字。但是這就足夠了嗎?不,顯然不夠。沒有了 textarea 則以為這沒有了 setSelectionRange, selectionStart 和 selectionEnd。但是好在原理也是類似,依舊使用 Range API 或者 Text Range(IE8及其更低版本)。具體的可以參考這篇:html元素contenteditable屬性如何定位游標和設定游標和這篇在可編輯的div中插入圖片。 具體實現程式碼我就不貼了,大家可以自己思考捋一捋。舉一反三,如果你真真正正地知道如何正確插入圖片,那麼插入複雜的 DOM 結構對你來說也是輕而易舉。

相關文章

前端開發 最新文章