【2023-6-27】vue中实现input禁止粘贴（el-input）

vue中实现input禁止粘贴

部分业务场景下，会出现不允许用户在input输入框中进行粘贴操作的情况，例如：密码输入框，或者一些其他的敏感信息，禁止粘贴。

实现一

要禁止粘贴操作在 el-input 组件中，可以结合使用 @paste 事件和 preventDefault 方法。
下面是一个简单的示例：

<template>
  <div>
    <el-input v-model="inputValue" @paste="handlePaste"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handlePaste(event) {
      event.preventDefault(); // 阻止粘贴操作
      // 或者可以执行其他的处理逻辑
    }
  }
};
</script>

@paste 监听了 el-input 组件的粘贴事件。在 handlePaste 方法中，使用 event.preventDefault() 阻止了默认的粘贴行为，从而禁止了粘贴操作。您还可以根据需要在 handlePaste 方法中执行其他的自定义处理逻辑。

实现二

el-input 组件上使用原生的 @paste 事件，并且同时结合 .capture 和 .prevent 修饰符来阻止粘贴操作
简单示例：

<template>
  <div>
    <el-input v-model="inputValue" @paste.native.capture.prevent="handlePaste"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handlePaste(event) {
      // 处理粘贴事件
    }
  }
};
</script>

上述示例中，我们在 @paste 事件上使用了 .native 修饰符，以便监听原生的 paste 事件。同时，使用 .capture 修饰符来将事件绑定在 el-input 组件的根元素上，以确保在捕获阶段处理事件。另外，使用 .prevent 修饰符来阻止默认的粘贴行为。

在 handlePaste 方法中，您可以处理粘贴事件，并根据需要执行自定义的逻辑。

实现三

除了使用 @paste.native.capture.prevent 来阻止粘贴操作之外，还有其他一些实现方案。

使用 @keydown 监听键盘事件：可以通过监听键盘事件来捕获粘贴操作。在 el-input 上添加 @keydown 事件监听，并在事件处理函数中检查按下的键是否为粘贴操作所对应的键码。如果是粘贴操作的键码，可以调用 event.preventDefault() 来阻止默认行为。

<template>
  <div>
    <el-input v-model="inputValue" @keydown="handleKeyDown"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleKeyDown(event) {
      if (event.ctrlKey && event.key.toLowerCase() === 'v') {
        event.preventDefault(); // 阻止粘贴操作
      }
    }
  }
};
</script>

使用 JavaScript 监听 input 事件：可以使用 JavaScript 监听 input 事件，在事件处理函数中判断输入框的值是否发生变化，并在变化时检查是否存在粘贴操作。如果存在粘贴操作，可以通过修改输入框的值来取消粘贴。

<template>
  <div>
    <el-input ref="inputRef" v-model="inputValue" @input="handleInput"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      const inputElement = this.$refs.inputRef.$el.querySelector('input');
      const pastedText = event.target.value;
      
      if (pastedText !== inputElement.value) {
        inputElement.value = ''; // 清空输入框的值
        this.inputValue = ''; // 更新绑定的数据
      }
    }
  }
};
</script>

在上述示例中，通过监听 input 事件，获取输入框的值并与实际输入的值进行比较。如果不一致，则表明是粘贴操作，可以通过清空输入框的值来取消粘贴。

@paste.native.capture.prevent 补充

上述实现中 @paste.native.capture.prevent 绑定一个函数，可以在函数中进行逻辑操作。同时也可以直接给@paste.native.capture.prevent绑定一个 false，都可以达到禁止粘贴的效果。