資訊專欄INFORMATION COLUMN
摘要：最近在山寨一款網(wǎng)頁微信的產(chǎn)品，對于用屬性做的編輯框有不少心得，希望可以幫到入坑的同學(xué)。在里面，光標(biāo)是一個對象，光標(biāo)對象是只有當(dāng)你選中某個元素的時候才會出現(xiàn)的。，現(xiàn)在我們來實(shí)際操作光標(biāo)了。
最近在山寨一款網(wǎng)頁微信的產(chǎn)品，對于div用contenteditable屬性做的編輯框有不少心得，希望可以幫到入坑的同學(xué)。
廢話不多說了，我們先來理解一下HTML的光標(biāo)對象是如何工作的，后面我會貼完整的DEMO代碼，不用急，先去理解，才能做出更加好的輸入體驗(yàn)。
在HTML里面，光標(biāo)是一個對象，光標(biāo)對象是只有當(dāng)你選中某個元素的時候才會出現(xiàn)的。
當(dāng)我們?nèi)c(diǎn)擊一個輸入框的時候，實(shí)際上它會產(chǎn)生一個選中對象-selection（就是我們可以看到的文字變成藍(lán)色的那個區(qū)域），selection在火狐瀏覽器可以直接用 window.getSelection()獲取，在HTML里面，selection只有一個的，并且selection是一個區(qū)域，你可以想象成一個長方形，它是有開始和結(jié)束的
當(dāng)你點(diǎn)擊一個輸入框，或者你切換到別的輸入框，selection是會跟著變化的。光標(biāo)就是在selection里面，光標(biāo)叫做range，是一個片段區(qū)域，和selection一樣，有開始點(diǎn)，和結(jié)束點(diǎn)，當(dāng)我們對文字按下左鍵向右拉的時候，就看到了文字變成藍(lán)色，那個就是光標(biāo)的開始和結(jié)束，當(dāng)我們直接點(diǎn)一下的時候，光標(biāo)在閃，其實(shí)只是開始和結(jié)束點(diǎn)重疊了。
OK，現(xiàn)在我們來實(shí)際操作光標(biāo)了。直接看完整的代碼，然后看效果吧。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79883.html
摘要：還沒結(jié)束上述例子中，在輸入框中表情只能以文本的形式呈現(xiàn)。如果想在輸入框中呈現(xiàn)輸入的表情，該怎么辦呢使用屬性為的容器代替是必須的，因?yàn)橹兄荒茱@示文本。 在普通的 textarea 中，只能顯示普通的文本。如果簡單的輸入文本，textarea 便足以勝任。但是實(shí)際情況往往要復(fù)雜得多。 簡單版本的插入表情 常見的版本一般都是使用 textarea，然后表情使用某種約定的文本格式代替，比如你好...
摘要：使用該組件注意一個問題就是不要在可視化區(qū)域的節(jié)點(diǎn)上使用樣式，否則會出現(xiàn)當(dāng)鼠標(biāo)焦點(diǎn)小時光標(biāo)和小水滴無法消失的情況地址項(xiàng)目地址參考鏈接模擬文本域輕松實(shí)現(xiàn)高度自適應(yīng)如何讓元素只能輸入純文本 使用contenteditable+div模擬textarea文本域?qū)崿F(xiàn)高度自適應(yīng) 開發(fā)過程中由于需要在發(fā)送消息的時候需要有一個可以高度自適應(yīng)的文本域，一開始是使用textarea并搭配auto-size...
摘要：使用該組件注意一個問題就是不要在可視化區(qū)域的節(jié)點(diǎn)上使用樣式，否則會出現(xiàn)當(dāng)鼠標(biāo)焦點(diǎn)小時光標(biāo)和小水滴無法消失的情況地址項(xiàng)目地址參考鏈接模擬文本域輕松實(shí)現(xiàn)高度自適應(yīng)如何讓元素只能輸入純文本 使用contenteditable+div模擬textarea文本域?qū)崿F(xiàn)高度自適應(yīng) 開發(fā)過程中由于需要在發(fā)送消息的時候需要有一個可以高度自適應(yīng)的文本域，一開始是使用textarea并搭配auto-size...
閱讀 2680·2021-11-25 09:43
閱讀 705·2021-11-12 10:36
閱讀 4879·2021-11-08 13:18
閱讀 2214·2021-09-06 15:00
閱讀 3161·2019-08-30 15:56
閱讀 978·2019-08-30 13:57
閱讀 2018·2019-08-30 13:48
閱讀 1442·2019-08-30 11:13
