js預設文字方塊貼上事件完美實現詳解

2023-01-26 18:01:34

前言

本文實際是用js移動控制遊標的位置！解決了網上沒有可靠教學的現狀

預設情況對一個文字方塊貼上，應該會有這樣的功能：

貼上文字後，遊標不會回到所有文字的最後位置，而是在貼上的文字之後
將選中的文字替換成貼上的文字

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

面對這樣的需求，我們肯定要控制移動遊標，可是現在的網上環境真的是慘，千篇一律的沒用程式碼...於是我就發表了這篇文章。

先上程式碼

    <textarea id="text" style="width: 996px; height: 423px;"></textarea>
    <script>
        // 監聽輸入框貼上事件
        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>

怎麼理解上述兩個功能？第一個解釋：比如說現在文字方塊有：

染念真的很生氣

如果我們現在在真的後面貼上不要，變成

染念真的不要很生氣|

攔截後的遊標是在生氣後面，但是我們經常使用發現，遊標應該出現在不要的後面吧！就像這樣：

染念真的不要|很生氣

第2個解釋：

染念真的不要很生氣

我們全選真的的同時貼上求你，攔截後會變成

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

但預設應該是：

染念求你|不要很生氣

程式碼分析

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

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)

獲取遊標前的內容，tc.value.substring(tc.selectionStart)是遊標後的內容。如果不相等，說明我們選中了一個區域(遊標選中一塊區域說明我們選中了一個區域)，程式碼只需要在最後獲取遊標後的內容這的索引改成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相同，不然選中一個區域了。

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

以上就是js預設文字方塊貼上事件完美實現詳解的詳細內容，更多關於js預設文字方塊貼上事件的資料請關注it145.com其它相關文章！

js預設文字方塊貼上事件完美實現詳解

目錄

前言

先上程式碼

程式碼分析

熱門文章