Extend JS copy content to clipboard

One 、 Reference resources

1. Share 8 A very practical Vue Custom instruction
2. document.execCommand MDN

Two 、 principle

1. Dynamically create textarea label , And set up readOnly Properties and move out of the visual area
2. Assign the value to be copied to textarea Labeled value attribute , And insert into body
3. Selected value textarea And copy
4. take body Inserted in textarea remove
5. Bind the event on the first call , Remove events when unbinding

3、 ... and 、 Code implementation

• Reference resources document.execCommand MDN
• Concept when a HTML When the document switches to design mode ,document expose execCommand Method , This method allows you to run commands to manipulate Elements of the editable content area .
• Common commands
  • copy Copy the current selection to the clipboard . The conditions for enabling this feature vary from browser to browser , And different periods , The enabling conditions are also different . Please check the browser compatibility table before using , To determine if it is available .
  • cut Clip the currently selected text and copy it to the clipboard . The conditions for enabling this feature vary from browser to browser , And different periods , The enabling conditions are also different . Please check the browser compatibility table before using , To determine if it is available .
  • delete Delete the selected part .

Four 、 Code implementation

4.1 Ordinary HTML In the code

<button onclick="copyToClip(' Content ')">Copy</button>
<script> /** *  Copy a single line of content to the pasteboard  * content :  Content to be copied  * message :  Tips after copying , If not, the default prompt is " Replication success " */ function copyToClip(content, message) {
       //  Dynamically create  textarea / input  label  var aux = document.createElement("input"); aux.setAttribute("value", content); //  Insert into  body document.body.appendChild(aux); //  Selected value  textarea  And copy  aux.select(); document.execCommand("copy"); document.body.removeChild(aux); if (message == null) {
       alert(" Replication success "); } else {
       alert(message); } } </script>

4.2 vue in v-copy Instructions

const copy = {
    
  bind(el, {
      value }) {
    
    el.$value = value
    el.handler = () => {
    
      if (!el.$value) {
    
        //  When the value is empty , Give hints . According to the project UI Design carefully 
        console.log(' No copy ')
        return
      }
      //  Dynamically create  textarea  label 
      const textarea = document.createElement('textarea')
      //  Will be  textarea  Set to  readonly  prevent  iOS  I'll call up the keyboard automatically , At the same time  textarea  Move out of the visible area 
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      //  will  copy  The value is assigned to  textarea  Labeled  value  attribute 
      textarea.value = el.$value
      //  take  textarea  Insert into  body  in 
      document.body.appendChild(textarea)
      //  Select values and copy 
      textarea.select()
      const result = document.execCommand('Copy')
      if (result) {
    
        console.log(' Replication success ') //  According to the project UI Design carefully 
      }
      document.body.removeChild(textarea)
    }
    //  Bind click event , It's a key  copy  La 
    el.addEventListener('click', el.handler)
  },
  //  Triggered when the value passed in is updated 
  componentUpdated(el, {
      value }) {
    
    el.$value = value
  },
  //  When an instruction is unbound to an element , Remove event binding 
  unbind(el) {
    
    el.removeEventListener('click', el.handler)
  },
}

export default copy