關於TextArea裡獲取游標相對位置的問題

2022-09-06 06:24:07 字數 1049 閱讀 1147

、其中,最難解決的問題應該就是獲取當前游標據文字框的相對位置了。因為乙個普通的通過正常的途徑是無法獲取到的。

那怎麼辦呢~

第一步:建立乙個普通的textarea框,然後在textarea外層套乙個div(div的position設為relative,到時候會根據這個div來定位彈出框的位置)

第二步:建立乙個與textarea 同樣尺寸的div(這個div在什麼位置無所謂)在此我先稱其為div_textarea。

注意:該div的所使用的字型,文字的大小,行間距等都要與文字框裡所使用的一致。然後將 

div_textarea的position也設為relative,visibility設為hidden(這個是背後操作的,當然不能讓人看到啦)

說明:該div的作用就是用來獲取輸入@時光標的相對位置的。 

結構如下:

第三步:指令碼獲取相對位置

操作: 當使用者輸入@了,通過指令碼自動將文字框裡的這些字元複製到div_textarea裡,然後獲取當前文字框游標在第幾個字的後面,獲得後在@相當於文字框的同樣位置,插入(該span和@的相對位置應該是一樣的)。 

插入完後,那只要獲得這個span離div_textarea的相對位置,就知道@離文字框的位置了。

獲得相對位置了,下面的事就好辦了。

如何在textarea的游標位置插入文字

在網上看了很多用js在游標處插入文字的 很多都沒有用,互抄而已,浪費時間。最近用到乙個新方法,可以到達這個需求。ie支援document.selection,firefox,chrome,safari以及opera都有selectionstart和selectionend屬性。效果演示 如下 vie...

jQuery獲取textarea文字域的值

jquery的.val 方法是專門用來獲取表單元素值的,而textarea也屬於表單元素所以可以直接用.val 方法獲取。不過要注意,由於textarea是個雙標記因此.text 或.html 方法也可以獲取到其中的資訊,但建議不要這樣獲取,因為.val 是專用於獲取值的方法,比.text 或.ht...

jQuery獲取textarea中的內容

查閱資料可知 jquery的.val 方法是專門用來獲取表單元素值的,而textarea也屬於表單元素所以可以直接用.val 方法獲取。由於textarea是個雙標記,因此.text 或.html 方法也可以獲取到其中的資訊。經過我們實際的測試發現 1.我們通過給textarea元素設定id,通過i...