作者darkness0727 (72727)
看板Web_Design
標題[問題]div定位的問題
時間Fri Aug 3 16:41:38 2012
有個功能是讓用戶輸入文字之外還可以插入表情符號的方式去表現
我了解很多論壇都有類似的功能,主要的差別是我想要讓表情符號直接出現在
編輯文本中,而不是一個:)=笑臉圖 分別出現在編輯頁面和顯示頁面。
而發言後的就可以直接將編輯文本放入你想顯示的div文本區域
所以我選擇了div標籤 將其contenteditable="true"
當click 一個表情符號的時候 會將"<image src='圖檔路徑'/>直接插入指定的div文本
但是要考量到對方在字串中插入表情符號,所以我需要獲取游標在div 編輯文本中的位置
接著最主要的問題是在於如何抓取到滑鼠游標在編輯文本中的位置
textarea tag可以抓到selectionstart的值 但是似乎div是沒辦法取得的
我有參考不少HTML Editor的作法,大多是使用iframe,不然就是純文字textarea的編輯器
但是我覺得我只要有表情符號能和文字一起顯示出來,或許可以從div上動手腳。
jQuery幾個HTML Editor Plugin我去改寫估計會花更多時間。
目前只差如何去catch 游標在可編輯的div內容位置,不知道有沒有前輩或者熟悉的版友
能給點意見,謝謝! 當然跟設計凹是一個辦法我知道...
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 111.254.5.210
→ awashharp:這頁資料有點舊,但目前都還能夠使用! 08/03 17:17
→ awashharp:理論上抓游標的位置應該是甚麼元素下都抓得到才是… 08/03 17:18
→ awashharp:不過游標的位置會因為物件失焦而找不到,做這東西時 08/03 17:19
→ awashharp:會先把原本的selection位置暫存下來,然後再給使用者選 08/03 17:20
→ awashharp:要插入的表情符號 08/03 17:20
→ darkness0727:謝謝我會參考看看! 08/03 17:35
跟這個方法相似的做法我有參考過,這個是國外知名網站的相關solution
http://stackoverflow.com/questions/5421892/getselection-not-working-in-ie
我希望能有三大主流瀏覽器都可以用的。
※ 編輯: darkness0727 來自: 111.254.5.210 (08/03 17:44)