Disable key-bindings copy/paste in Vue

user_7758205 0
Viewed 2230

I am working for the first time in Vue. I have a form with an ID confirmation, I need to restrict the CTRL+C, CTRL+v, and right-click copy/paste inputs.

The code of the forms is something like this:

<script>
import { validationMixin } from 'vuelidate'

  data () {
    return {
      form: {
        id_number: '',
        id_number_validation: '',
      },
    }
  },
  computed: {
    chunkedForm () {
      return chunk([
        { label: 'ID number',
          model: 'id_number',
          type: 'number',
          event: null,
          icon: 'assignment_ind' },
        { label: 'id number validation',
          model: 'id_number_validation',
          type: 'number',
          event: null,
          icon: 'assignment_ind' },
      ], 2)
    },
    today: function () {
      let currenDate = new Date()
      return currentDate.toISOString()
    }
  },
  validations: {
    form: {
      id_number: {
        numberSerializer,
        required,
        minLength: minLength(6),
        maxLength: maxLength(11),
        validDocumentNumber
      },
      id_number_validation: {
        numberSerializer,
        required,
        minLength: minLength(6),
        maxLength: maxLength(11),
        validDocumentNumber,
        sameAsDocumentNumber: sameAs('id_number')
      },
    },
  },

</script>

I don't know if it's possible, I am searching for a Vue function that helps me to handle these key-bindings.

The code is only a sample, maybe it has some error but it gives an idea of the form structure and how I call it.

vue.js
1 Answers

For avoiding the right click, you can just use something like @click.right.prevent which will block clicking on the element and its children. You can disable Ctrl+C and Ctrl+V by binding the copy and paste events in the same way.

You can see a working example here, where the paragraph cannot be copied (well, unless you copy it from the source):

new Vue({
  el: '#content',
  data: {

  },
  methods: {
    keydown: function(e) {
      console.log(e)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="content">
  <p @click.right.prevent @keydown="keydown" @copy.prevent @paste.prevent>
    You shouldn't be able to copy me! <strong>Me Too!</strong>
  </p>
</div>

https://codepen.io/lielfr/pen/RwaQJwm

However, a skilled user might be able to bypass these protections easily, so I'd think twice before showing a content you don't want the users to copy.

user_111431110
Related