This is the 29th day of my participation in the August Wenwen Challenge.More challenges in August

preface

Yesterday we learned about mouse events, today we will learn about clipboard events.

introduce

A clipboard event has three events: copy, cut, and paste.

Duplicate events

Copy events, as the name suggests, are the events that you fire when you copy.

The operation of copying is to select the content, then CTRL + C (Command + C for MAC) or right-click the menu and click Copy.

Each of these actions triggers a replication event.

  <div class="content"> < p style = "max-width: 100%; clear: both; </div><script>
    const div = document.querySelector('.content')
    div.addEventListener('copy'.() = > {
      console.log('I'm copy event')})</script>
Copy the code

Normally we listen for replication events, so we want to add our content to the copied content.

For example, if you copy a piece of code while digging gold, the console will paste it and a message will appear:

This is done by listening for replication events to overwrite the copied content.

Let’s first print it by copying the event object of the event

You can see there’s a clipboardData property. It’s prototyped with the setData method, which sets the contents of the clipboard.

The setData method takes two arguments

setData(format, data)

  • The first is the type of content you want to copy, text (text/plain) or HTML (text/ HTML) and so on

  • The second is content, a string type.

You can then retrieve the selected text via document.getSelection().toString().

The default event must be prevented from being copied, otherwise our content will not be added.

Complete code:

  <div class="content"> hello < / div ><script>
    const div = document.querySelector('.content')
    div.addEventListener('copy'.(e) = > {
      // The default event that prevents replication
      e.preventDefault()
      const selection = document.getSelection()
      // Set the text to the clipboard
      e.clipboardData.setData('text', selection.toString() + ', I am the answer. ')})</script>
Copy the code

Copy hello and paste it on the console.

The cut event

Clipping events are the events that are triggered when you clipped the content you selected. This is used for input, Textarea, and contenteditable elements that are true.

  <input type="text" value="Hello, I'm the answer CP3!">
  <script>
    const input = document.querySelector('input')
    input.addEventListener('cut'.(e) = > {
      console.log('I am cut Event')})</script>
Copy the code

ClipboardData is used in the same way as the replication event. You can refer to the replication event above.

Paste the event

A paste event is an event that is triggered when you copy or cut content and paste it.

The main thing is to read the contents of the stickboard, and also use clipboardData object.

It has the following properties

Types: Array types that represent a list of types of copied content, such as text/plain, text/ HTML, Files, etc.

Items: A list of copied content, each of which contains kind and Type attributes.

  • kind: Indicates the type of the content to be copiedstringorfileEtc.
  • type: Copy contentMIME-TypeThe type is generallyimage/png.text/plain.text/htmlEtc.

Items also have methods like getAsFile() (returns a file object), getAsString(fn) (fn’s argument is copied text), etc

Files: Array type, a list of copied files, each of which is a File object.

It also has a getData(format) method to get the copied content. Format is the type of the copied content, such as text/plain, text/ HTML, etc

A simple example:

  <input type="text">
  <script>
    const input = document.querySelector('input')
    input.addEventListener('paste'.async (e) => {
      const items = e.clipboardData.items
      console.log(e.clipboardData.types)
      for (let i = 0; i < items.length; i++) {
        if (items[i].kind === 'string') {
          items[i].getAsString((str) = > {
            console.log(str)
          })
        }
        // Processing of copied files
        if (items[i].kind === 'files') {}}})</script>
Copy the code

Copied plain text:

Copy HTML:

Copy from vscode:

conclusion

Above is the clipboard event related knowledge, you can be interested in hands-on knocking, learning.

Thank you for reading.