前言

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

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

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

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

面對(duì)這樣的需求，我們肯定要控制移動(dòng)光標(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');
            // 這里寫你對(duì)剪貼板的私貨
            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>

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

染念真的很生氣

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

染念真的不要很生氣|

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

染念真的不要|很生氣

第2個(gè)解釋：

染念真的不要很生氣

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

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

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

染念求你|不要很生氣

代碼分析

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

233|333

^--- ^

1-- - 4

tc.selectionEnd=4，tc.selectionStart = 4

如果相等，說明就是簡(jiǎn)單的定位

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)容。 如果不相等，說明我們選中了一個(gè)區(qū)域(光標(biāo)選中一塊區(qū)域說明我們選中了一個(gè)區(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)位置(最后)，這樣才能獲得位置。 針對(duì)第1個(gè)問題，我們就要把光標(biāo)移動(dòng)到粘貼的文本之后，我們需要計(jì)算位置。

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

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

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

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

最新評(píng)論