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