提及 ( Mention)的功能如何實現,用什麼技術?

時間 2021-05-05 15:27:03

1樓:MY Sun

有現成的庫可以分析一下: At.js. 作者為 @Chord Luo .

其中用到了乙個叫 Caret.js 的庫(同一作者), 用於獲取文字框中游標所在的位置.

2樓:彬仔

技術難題:當你在 Textarea 任意位置敲 @ 的時候,就會有乙個浮出層,那 @ 的位置怎麼找?

利用乙個隱藏的層來模擬 Textarea,就是 Textarea 有什麼內容,這個層就應該有什麼內容,這樣便可知道 @ 的位置

如果 Textare 出現了很多 @,則記錄 @ 前後的資訊很有必要然後把 @ 後的資訊,作為乙個非同步請求的內容即可

3樓:pw

當時做網易微博的 @ 提示,思路是這樣的:監聽 keyup 事件

keyup 的時候找到游標前最後乙個 @ 的位置,獲取 @ 之後的內容作為使用者輸入內容

發 ajax 請求,引數是使用者輸入的內容,伺服器返回乙個 suggest 列表

渲染 suggest 列表,定位到游標前最後乙個 @ 下面

流程很簡單,裡面坑很多。比較苦逼的一點是,如何找到最後乙個 @ 的位置。因為輸入框是個 textarea,不能簡單的通過插乙個 span 探針的位置來做;數字數的話如果遇到非等寬字型就 2b 了。

最終的解決方案是:建立乙個 pre(用 pre 是為了保持 textarea 中的回車),樣式、高寬字型等等設定成跟輸入框一樣。visibility 不可見,絕對定位到頁面右下角(為了不影響使用者輸入)

把輸入框的內容 copy 乙份設定為 pre 的內容

pre 中最後插乙個 span

獲取 span 相對於 pre 的 offset

將獲取到的 offset 加到 textarea 相對於頁面左上角的 offset 上面,即獲取 textarea 中最後乙個 @ 相對於頁面左上角的 offset

其中還有些問題,比如 @ 出現在 textarea 最後時如何處理、textarea 中發生滾動時如何處理、游標位置切換的話也要觸發下拉列表等等。總體思路上是這樣的。

請問apple watch的螢幕常亮功能實用嗎?

Lievios 很實用。沒有螢幕常亮功能就意味著每次想要看時間都要刻意去做乙個喚醒螢幕的動作。抬腕或者觸碰螢幕。但一定會有些使用場景讓使用者不方便或不太情願去用這樣的動作去喚醒螢幕。比如,側臥的時候,撐傘的時候,開車的時候,騎行的時候,視線已經在表盤上然而螢幕熄滅的時候。等等 建議始終顯示開啟 抬腕...

產品經理需要知道產品功能在技術上是如何實現的嗎?

ericlin 需要明確基本的實現原理 1 可以明確整體的成本 時間 伺服器balabala 從而做出更好的選擇 or 取捨 2 可以協調不同部門間的協作和進度掌握 產品一哥 題主你好,產品經理在產品功能和技術上的實現的在將需求轉化為實現方案時,可以橫向對比不同實現方案的價效比,便於選擇最優或者相對...

如何看待老師的偏心與從未提及?

喜羊羊 任何人都不能做到完全一碗水端平,每個人都會有自己相對喜歡與一般喜歡的人和事物,從家長的角度來講,如果遇到老師這種情況,要教育孩子不能所有的人都圍繞著你轉,想要老師對你重視,就是要努力的去學習,做好老師布置的任務,慢慢改變老師的看法,因為乙個能給班級帶來更多榮譽的和乙個能給班級拖後腿的肯定都不...