資訊專(zhuān)欄INFORMATION COLUMN
摘要：還沒(méi)結(jié)束上述例子中，在輸入框中表情只能以文本的形式呈現(xiàn)。如果想在輸入框中呈現(xiàn)輸入的表情，該怎么辦呢使用屬性為的容器代替是必須的，因?yàn)橹兄荒茱@示文本。
在普通的 textarea 中，只能顯示普通的文本。如果簡(jiǎn)單的輸入文本，textarea 便足以勝任。但是實(shí)際情況往往要復(fù)雜得多。
簡(jiǎn)單版本的插入表情常見(jiàn)的版本一般都是使用 textarea，然后表情使用某種約定的文本格式代替，比如“你好啊[微笑]”。在呈現(xiàn)的時(shí)候，通過(guò)固定的文本解析方法將內(nèi)容中的表情文本替換成圖片。新浪微博中發(fā)微博的輸入框就是如此。但是，在這有一點(diǎn)需要注意，如果只是簡(jiǎn)單的在文本的最后插入表情之類(lèi)的預(yù)定好的文本格式，只需獲取到到 textarea 的 value 然后做加法即可。
let editor = document.querySelect("#editor");
editor.value += "[微笑]";
沒(méi)你想的這么簡(jiǎn)單
但實(shí)際情況卻沒(méi)有這么簡(jiǎn)單，因?yàn)橛脩艨梢宰约哼x擇光標(biāo)的位置。當(dāng)用戶在某一段文本中間插入光標(biāo)之后，可不是簡(jiǎn)單的加法了。在這種情況下，需要獲取到光標(biāo)所在位置，在這個(gè)位置上插入用來(lái)代替表情的文本，然后將光標(biāo)設(shè)置到表情文本的后面。在這需要兩個(gè)額外的方法：getCaretPosition和 setCaretPosition 。
getCaretPosition/setCaretPosition瀏覽器并沒(méi)有提供直接獲取光標(biāo)位置的方法，需要我們變通的處理。瀏覽器基本上都支持文本框的select()方法，這個(gè)方法用于選中文本框中所有的文本，但是只能乖乖的拿到返回的所有文本。HTML5 添加了兩個(gè)屬性：selectionStart 和 selectionEnd 幫助我們更加順利地獲取選擇的文本。這兩個(gè)屬性中保存的是基于0的數(shù)值，表示所選擇的文本的范圍，分別表示文本選區(qū)（選中的文本）開(kāi)頭和結(jié)尾相對(duì)整個(gè)文本內(nèi)容的偏移量（在整個(gè)文本內(nèi)容中的位置）。例如：
let editor = document.querySelector("#editor");
// 從第一個(gè)字符開(kāi)始，選中三個(gè)字符
editor.selectionStart = 0;
editor.selectionEnd = 1;
// 從第三個(gè)字符開(kāi)始選中三個(gè)字符
editor.selectionStart = 2;
editor.selectionEnd = 5;
說(shuō)到這你可能要問(wèn)了，這個(gè)光標(biāo)有啥關(guān)系?。縿e急，聽(tīng)我慢慢說(shuō)。既然上述兩個(gè)設(shè)置不同數(shù)字可以選擇文本，那如果兩個(gè)值設(shè)置成相同的數(shù)字，會(huì)怎么樣呢？
// 從第三個(gè)字符開(kāi)始選中零個(gè)字符 editor.selectionStart = 2; editor.selectionEnd = 2;
起點(diǎn)和終點(diǎn)重合了！那么換個(gè)角度來(lái)描述就是：當(dāng)我們?cè)讷@取光標(biāo)位置的時(shí)候，其實(shí)就是選中的文本范圍起點(diǎn)和重點(diǎn)重合，相當(dāng)于文本范圍的起點(diǎn)偏移量其實(shí)就是光標(biāo)所在的位置偏移量，所以此時(shí)selectionStart的返回值就是我們需要的結(jié)果。
更關(guān)鍵的是，當(dāng) End 和 Start 設(shè)置成相同值時(shí)，選區(qū)也是空的，起點(diǎn)和重點(diǎn)充電，就好像是設(shè)置了光標(biāo)的位置。其實(shí)有一個(gè)簡(jiǎn)便的方法 setSelectionRange(start, end)，原理相同。
當(dāng)然有興趣你也可以試試 End小于 Start的情況。上述這些在現(xiàn)代瀏覽器和 IE9+ 上都支持。
前端向來(lái)麻煩的還是瀏覽器的兼容問(wèn)題。在低版本的 IE 中只能使用 document.selection 對(duì)象來(lái)模擬光標(biāo)定位了。document.selection 只存在于 IE8 及更早的版本（可以使用 window.getSelection 代替），保存著用戶在整個(gè)文檔范圍內(nèi)選擇的文本信息，但是無(wú)法確定用戶選擇的是頁(yè)面中哪個(gè)部位的文本。要想取得選擇的文本，首先需要?jiǎng)?chuàng)建一個(gè)范圍（Range，IE9+ 支持 DOM Range API，但是 IE8及之前的版本不支持，但是有類(lèi)似的概念，text range。這是 IE 專(zhuān)有的特性）?？墒褂?document.selection.createTextRange 來(lái)創(chuàng)建我們所需要的 text range。然后利用moveStart().aspx)將文本的范圍的起點(diǎn)從當(dāng)前位置（當(dāng)前位置起點(diǎn)和重點(diǎn)是重合的）移動(dòng)到文本的開(kāi)頭，然后計(jì)算選中文本的長(zhǎng)度，這個(gè)長(zhǎng)度值可以用來(lái)代替當(dāng)前光標(biāo)的位置。
let range = document.selection.createRange();
range.moveStart("character", editor.value.length);
cursurPosition = range.text.length;
設(shè)置光標(biāo)位置思路類(lèi)似，但是代碼稍有不同：
let range = editor.createTextRange();
range.collapse(true);
range.moveEnd("character", pos);
range.moveStart("character", pos);
range.select();
總的來(lái)說(shuō)，在 textarea 中獲取和設(shè)置光標(biāo)位置還是蠻簡(jiǎn)單的。講到這里了，我想插入表情應(yīng)該是很輕松的一件事情了
獲取光標(biāo)位置（文本范圍前后重疊） -> 修改文本范圍（或者手動(dòng)拼接） -> 重新設(shè)置光標(biāo)位置
至此，表情插入功能的基本實(shí)現(xiàn)。
還沒(méi)結(jié)束上述例子中，在輸入框中表情只能以文本的形式呈現(xiàn)。如果想在輸入框中呈現(xiàn)輸入的表情，該怎么辦呢？使用 contenteditable 屬性為 true 的容器代替 textarea 是必須的，因?yàn)?textarea 中只能顯示文本。但是這就足夠了嗎？不，顯然不夠。沒(méi)有了 textarea 則以為這沒(méi)有了 setSelectionRange, selectionStart 和 selectionEnd。但是好在原理也是類(lèi)似，依舊使用 Range API 或者 Text Range(IE8及其更低版本)。具體的可以參考這篇：html元素contenteditable屬性如何定位光標(biāo)和設(shè)置光標(biāo)和這篇在可編輯的div中插入圖片。 具體實(shí)現(xiàn)代碼我就不貼了，大家可以自己思考捋一捋。舉一反三，如果你真真正正地知道如何正確插入圖片，那么插入復(fù)雜的 DOM 結(jié)構(gòu)對(duì)你來(lái)說(shuō)也是輕而易舉。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87840.html
摘要：由于我們的富文本輸入框比較簡(jiǎn)單，所以只需要處理兩類(lèi)數(shù)據(jù)即可，其一是普通的文本類(lèi)型數(shù)據(jù)，包括表情其二則是圖片類(lèi)型數(shù)據(jù)。 最近折騰 Websocket，打算開(kāi)發(fā)一個(gè)聊天室應(yīng)用練練手。在應(yīng)用開(kāi)發(fā)的過(guò)程中發(fā)現(xiàn)可以插入 emoji ，粘貼圖片的富文本輸入框其實(shí)蘊(yùn)含著許多有趣的知識(shí)，于是便打算記錄下來(lái)和大家分享。 倉(cāng)庫(kù)地址：chat-input-box預(yù)覽地址：https://codepen.io...
摘要：背景最近我們微信讀書(shū)將寫(xiě)想法換成了基于的富文本編輯器，遇到了不少問(wèn)題，這里我將簡(jiǎn)單的介紹一下我們?cè)陂_(kāi)發(fā)過(guò)程中踩到的坑。 背景 最近我們微信讀書(shū)將寫(xiě)想法換成了基于webview的富文本編輯器，遇到了不少問(wèn)題，這里我將簡(jiǎn)單的介紹一下我們?cè)陂_(kāi)發(fā)過(guò)程中踩到的坑。 實(shí)現(xiàn)富文本編輯器有兩個(gè)基本思路： 基于native實(shí)現(xiàn)：比如coretext或者textkit 基于uiwebview實(shí)現(xiàn) 第一...
摘要：技術(shù)棧項(xiàng)目背景這個(gè)項(xiàng)目主要是為了玩玩，項(xiàng)目的方向大概是做出類(lèi)似的在線聊天系統(tǒng)。項(xiàng)目使用進(jìn)行部署和管理，功能在不斷的迭代開(kāi)發(fā)中。首頁(yè)用戶列表用戶中心注冊(cè)登陸注銷(xiāo)用戶資料指定聊天室開(kāi)始安裝使用之前，請(qǐng)?jiān)谥行薷牡陌惭b路徑。 技術(shù)棧：NodeJS & SocketIO & Express & EJS & MongoDB & Gulp 項(xiàng)目背景 這個(gè)項(xiàng)目主要是為了玩玩NodeJS，項(xiàng)目的方向大概...
摘要：技術(shù)棧項(xiàng)目背景這個(gè)項(xiàng)目主要是為了玩玩，項(xiàng)目的方向大概是做出類(lèi)似的在線聊天系統(tǒng)。項(xiàng)目使用進(jìn)行部署和管理，功能在不斷的迭代開(kāi)發(fā)中。首頁(yè)用戶列表用戶中心注冊(cè)登陸注銷(xiāo)用戶資料指定聊天室開(kāi)始安裝使用之前，請(qǐng)?jiān)谥行薷牡陌惭b路徑。 技術(shù)棧：NodeJS & SocketIO & Express & EJS & MongoDB & Gulp 項(xiàng)目背景 這個(gè)項(xiàng)目主要是為了玩玩NodeJS，項(xiàng)目的方向大概...
閱讀 2207·2021-10-12 10:11
閱讀 896·2021-10-09 09:41
閱讀 3884·2021-09-09 11:37
閱讀 2017·2021-09-08 10:41
閱讀 2681·2019-08-30 12:58
閱讀 2407·2019-08-30 10:58
閱讀 1342·2019-08-26 13:40
閱讀 4228·2019-08-26 13:36
