前言

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

默認(rèn)情況對一個文本框粘貼，應(yīng)該會有這樣的功能：

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

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

面對這樣的需求，我們肯定要控制移動光標(biāo)，可是現(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); 
            }
            
            // 重新設(shè)置光標(biāo)位置
            tc.selectionEnd =tc.selectionStart = start
        });
    </script>

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

染念真的很生氣

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

染念真的不要很生氣|

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

染念真的不要|很生氣

第2個解釋：

染念真的不要很生氣

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

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

但默認(rèn)應(yīng)該是：

染念求你|不要很生氣

代碼分析

針對第2個問題，我們應(yīng)該先要獲取默認(rèn)的光標(biāo)位置在何處，tc.selectionStart是獲取光標(biāo)開始位置，tc.selectionEnd是獲取光標(biāo)結(jié)束位置。 為什么這里我寫了一個判斷呢？因為默認(rèn)時候，我們沒有選中一塊區(qū)域，就是把光標(biāo)人為移動到某個位置(讀到這里，光標(biāo)在位置后面，現(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)

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

|233333|

^----- ^

1----- 7

tc.selectionEnd=7，tc.selectionStart = 1

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

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

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

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

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

最新評論