js默認文本框粘貼事件怎么實現

本文小編為大家詳細介紹“js默認文本框粘貼事件怎么實現”，內容詳細，步驟清晰，細節處理妥當，希望這篇“js默認文本框粘貼事件怎么實現”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

先上代碼

    <textarea id="text" ></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默認文本框粘貼事件怎么實現”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。