【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,都可以达到禁止粘贴的效果。