前言

本文實際是用js移動控制光標的位置！解決了網(wǎng)上沒有可靠教程的現(xiàn)狀

默認情況對一個文本框粘貼，應該會有這樣的功能：

• 粘貼文本后，光標不會回到所有文本的最后位置，而是在粘貼的文本之后
• 將選中的文字替換成粘貼的文本

但是由于需求，我們需要攔截粘貼的事件，對剪貼板的文字進行過濾，這時候粘貼的功能都得自己實現(xiàn)了,而一旦自己實現(xiàn)，上面2個功能就不見了，我們就需要還原它。

面對這樣的需求，我們肯定要控制移動光標，可是現(xiàn)在的網(wǎng)上環(huán)境真的是慘，千篇一律的沒用代碼...于是我就發(fā)表了這篇文章。

先上代碼

    <textarea id="text" style="width: 996px; height: 423px;"></textarea>
    <script>
        // 監(jiān)聽輸入框粘貼事件
        document.getElementById('text').addEventListener('paste', function (e) {
            e.preventDefault();
            let clipboardData = e.clipboardData.getData('text');
            // 這里寫你對剪貼板的私貨
            let tc = document.querySelector("#text");
            tc.focus();
            const start = (tc.value.substring(0,tc.selectionStart)+clipboardData).length;
            if(tc.selectionStart != tc.selectionEnd){
                tc.value = tc.value.substring(0,tc.selectionStart)+clipboardData+tc.value.substring(tc.selectionEnd)
            }else{
                tc.value = tc.value.substring(0,tc.selectionStart)+clipboardData+tc.value.substring(tc.selectionStart); 
            }
            
            // 重新設置光標位置
            tc.selectionEnd =tc.selectionStart = start
        });
    </script>

怎么理解上述兩個功能？ 第一個解釋： 比如說現(xiàn)在文本框有：

染念真的很生氣

如果我們現(xiàn)在在真的后面粘貼不要，變成

染念真的不要很生氣|

攔截后的光標是在生氣后面，但是我們經(jīng)常使用發(fā)現(xiàn)，光標應該出現(xiàn)在不要的后面吧！ 就像這樣：

染念真的不要|很生氣

第2個解釋：

染念真的不要很生氣

我們?nèi)x真的的同時粘貼求你，攔截后會變成

染念真的求你不要很生氣|

但默認應該是：

染念求你|不要很生氣

代碼分析

針對第2個問題，我們應該先要獲取默認的光標位置在何處，tc.selectionStart是獲取光標開始位置，tc.selectionEnd是獲取光標結(jié)束位置。 為什么這里我寫了一個判斷呢？因為默認時候，我們沒有選中一塊區(qū)域，就是把光標人為移動到某個位置(讀到這里，光標在位置后面，現(xiàn)在人為移動到就是前面，這個例子可以理解不？)，這個時候兩個值是相等的。

233|333

^--- ^

1-- - 4

tc.selectionEnd=4，tc.selectionStart = 4

如果相等，說明就是簡單的定位

tc.value = tc.value.substring(0,tc.selectionStart)+clipboardData+tc.value.substring(tc.selectionStart); tc.value.substring(0,tc.selectionStart)

獲取光標前的內(nèi)容，tc.value.substring(tc.selectionStart)是光標后的內(nèi)容。 如果不相等，說明我們選中了一個區(qū)域(光標選中一塊區(qū)域說明我們選中了一個區(qū)域)，代碼只需要在最后獲取光標后的內(nèi)容這的索引改成tc.selectionEnd

|233333|

^----- ^

1----- 7

tc.selectionEnd=7，tc.selectionStart = 1

在獲取光標位置之前，我們應該先使用tc.focus();聚焦，使得光標回到文本框的默認位置(最后)，這樣才能獲得位置。 針對第1個問題，我們就要把光標移動到粘貼的文本之后，我們需要計算位置。

獲得這個位置，一定要在tc.value重新賦值之前，因為這樣的索引都沒有改動。 const start = (tc.value.substring(0,tc.selectionStart)+clipboardData).length;這個代碼和上面解釋重復，很簡單，我就不解釋了。

最后處理完了，重新設置光標位置，tc.selectionEnd =tc.selectionStart = start,一定讓selectionEnd和selectionStart相同，不然選中一個區(qū)域了。

如果我們在value重新賦值之后獲取(tc.value.substr(0,tc.selectionStart)+clipboardData).length，大家注意到?jīng)]，我們操作的是tc.value，value已經(jīng)變了，這里的重新定位光標開始已經(jīng)沒有任何意義了！

以上就是js默認文本框粘貼事件完美實現(xiàn)詳解的詳細內(nèi)容，更多關于js默認文本框粘貼事件的資料請關注腳本之家其它相關文章！

最新評論