深入理解DOM事件類型系列第四篇——剪貼板事件 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　剪貼板操作看起來不起眼，但卻十分有用，可以增強用戶體驗，方便用戶操作。本文將詳細介紹剪貼板事件

定義

　　剪貼板操作包括剪切(cut)、復制(copy)和粘貼(paste)這三個操作，快捷鍵分別是ctrl+x、ctrl+c、ctrl+v。當然也可以使用鼠標右鍵菜單進行操作

　　關于這3個操作共對應下列6個剪貼板事件

　　copy：在發生復制操作時觸發

　　cut：在發生剪切操作時觸發

　　paste：在發生粘貼操作時觸發

　　IE瀏覽器只有在文本中選定字符時，copy和cut事件才會發生。且在非文本框中(如div元素)只能發生copy事件

　　firfox瀏覽器只有焦點在文本框中才會發生paste事件

<input value="text" id="test">
<script>
test.onpaste= test.oncopy = test.oncut = function(e){
    e = e || event;
    test.value = e.type;
    return false;
}
</script>

　　beforecopy：在發生復制操作前觸發

　　beforecut：在發生剪切操作前觸發

　　beforepaste：在發生粘貼操作前觸發

<input value="text" id="test">
<script>
test.onbeforepaste= test.onbeforecopy = test.onbeforecut = function(e){
    e = e || event;
    test.value = e.type;
    return false;
}
</script>

對象方法

　　剪貼板中的數據存儲在clipboardData對象中。對于IE瀏覽器來說，這個對象是window對象的屬性；對于其他瀏覽器來說，這個對象是事件對象的屬性

    e = e || event;
    var clipboardData = e.clipboardData || window.clipboardData;

　　這個對象有三個方法：getData()、setData()和clearData ()

getData()

　　getData()方法用于從剪貼板中取得數據，它接受一個參數，即要取得的數據的格式。在IE中，有兩種數據格式："text" 和 "URL"。在其他瀏覽器中，這個參數是一種MIME類型；不過，可以用"text"代表

　　[注意]在IE瀏覽器中，cut和copy事件中的getData()方法始終返回null；而其他瀏覽器始終返回空字符串''。但如果和setDada()方法配合，就可以正常使用

<input id="test" value="123">
<script>
test.onpaste=function(e){
    e = e || event;
    var clipboardData = e.clipboardData || window.clipboardData;
    test.value = '測試' + clipboardData.getData('text');
    return false;
}
</script>

setData()

　　setData()方法的第一個參數也是數據類型，第二個參數是要放在剪貼板中的文本。對于第一個參數的規則與getData()相同

　　在IE瀏覽器中，該方法在成功將文本放到剪貼板中后，返回true，否則返回false；而其他瀏覽器中，該方法無返回值

　　[注意]在paste事件中，只有IE瀏覽器可以正常使用setData()方法，chrome瀏覽器會靜默失敗，而firefox瀏覽器會報錯

<input id="test" value="123">
<script>
test.oncopy=function(e){
    e = e || event;
    var clipboardData = e.clipboardData || window.clipboardData;
    clipboardData.setData('text','測試');
    test.value = clipboardData.getData('text');
    return false;
}
</script>

clearData()

　　clearData()方法用于從剪貼板中刪除數據，它接受一個參數，即要取得的數據的格式。在IE中，有兩種數據格式："text"和"URL"。在其他瀏覽器中，這個參數是一種MIME類型；不過，可以用"text"表示

　　在IE瀏覽器中，該方法在成功將文本放到剪貼板中后，返回true，否則返回false；而其他瀏覽器該方法的返回值為undefined

　　[注意]在paste事件中，chrome瀏覽器和IE瀏覽器可以正常使用setData()方法，而firefox瀏覽器會報錯

<input id="test" value="123">
<script>
test.oncopy=function(e){
    e = e || event;
    var clipboardData = e.clipboardData || window.clipboardData;
    test.value = clipboardData.clearData('text');
    return false;
}
</script>

應用

【1】屏蔽剪貼板

　　通過阻止默認行為來屏蔽剪貼板。對于一些受保護的文檔來說是一種選擇

<input value="text">
<button id="test">屏蔽剪貼板</button>
<script>
test.onclick = function(){
    document.oncopy=document.oncut = document.onpaste = function(e){
        e = e || event;
        alert('該文檔不允許復制剪貼操作，謝謝配合')
        return false;
    }    
}
</script>

【2】過濾字符

　　如果確保粘貼到文本框中的文本中包含某些字符，或者符合某種形式時，可以使用剪貼板事件。比如只允許粘貼數字

<input id="test">
<script>
test.onpaste = function(e){
    e = e || event;
    var clipboardData = e.clipboardData || window.clipboardData;
    if(!/^\d+$/.test(clipboardData.getData('text')))
        return false;
    }    
}
</script>