Deep understanding of the DOM event Type series fifth-Clipboard events

Previous Words

Clipboard operations look inconspicuous, but they are useful to enhance the user experience and facilitate user action. This article describes the Clipboard events in detail

definition

Clipboard operations include cut (cut), copy, and paste (paste) Three operations, the shortcut keys are ctrl+x, CTRL + C, CTRL + V, respectively. Of course, you can also use the right mouse button menu to operate

For all 3 operations, the following 6 clipboard events are appropriate for each

Copy: Triggered when a copy operation occurs

Cut: triggered when a cut operation occurs

Paste: triggered when a paste operation occurs

The copy and cut events do not occur until you select the characters in the text for IE browser. And only copy events can occur in non-text boxes, such as DIV elements

Firfox The Paste event occurs only if the browser has focus in the text box

<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: Triggered before a copy operation occurs

Beforecut: Triggers before a cut operation occurs

Beforepaste: Triggers before a paste operation occurs

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

Object Methods

The data in the Clipboard is stored in the Clipboarddata object. For IE, this object is the property of the Window object, and for other browsers, the object is the property of the event object.

    E = e | | event;
    var clipboarddata = E.clipboarddata | | Window.clipboarddata;

This object has three methods: GetData (), SetData (), and ClearData ()

GetData ()

The GetData () method is used to get data from the Clipboard, which accepts a parameter, which is the format of the data to be obtained. In IE, there are two kinds of data formats: "Text" and "URL". In other browsers, this parameter is a MIME type, but you can use "text" to represent

[note] in IE, the GetData () method in cut and copy events always returns NULL, while other browsers always return an empty string '. However, if combined with the Setdada () method, it can be used normally

<input id= "test" value= "123" >
<script>
test.onpaste=function (e) {
    e = e | | event;
    var clipboarddata = E.clipboarddata | | Window.clipboarddata;
    Test.value = ' Test ' + clipboarddata.getdata (' text ');
    return false;
}
</script>

SetData ()

The first parameter of the SetData () method is also the data type, and the second parameter is the text to be placed on the Clipboard. The rule for the first parameter is the same as GetData ()

In IE, this method returns True when the text is successfully placed on the Clipboard, otherwise it returns false, and in other browsers, the method has no return value

[note] In the Paste event, only IE browser can use the SetData () method, the Chrome browser will silently fail, and the Firefox browser will error

<input id= "test" value= "123" >
<script>
test.oncopy=function (e) {
    e = e | | event;
    var clipboarddata = E.clipboarddata | | Window.clipboarddata;
    Clipboarddata.setdata (' text ', ' test ');
    Test.value = Clipboarddata.getdata (' text ');
    return false;
}
</script>

ClearData ()

The ClearData () method is used to remove data from the Clipboard, which accepts a parameter, which is the format of the data to be obtained. In IE, there are two kinds of data formats: "Text" and "URL". In other browsers, this parameter is a MIME type, but you can use "text" to indicate

<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>

Application

"1" masking clipboard

Masks the Clipboard by blocking the default behavior. is a choice for some protected documents

<input value= "text" >
<button id= "Test" > Masking clipboard </button>
<script>
Test.onclick = function () {
    document.oncopy=document.oncut = Document.onpaste = function (e) {
        e = e | | event;< C15/>alert ('