input 붙여넣기 방지하기

때로는 보안과 같은 이유로 input에 붙여넣기가 허용되지 않을 수 있다.

이 경우, 붙여넣기 이벤트를 탐지하고 해당 이벤트가 제대로 작동하지 못하도록 해주어야 한다.

이번엔 이를 어떻게 구현할 수 있을지 알아보았다.

<input placeholder="paste not allowed"/>

다음과 같이 input이 있다.

이 input에 붙여넣기를 허용하지 않기 위해서는 어떻게 해야할까?

eventListner를 사용하면, 이를 간단하게 구현할 수 있다.

const input = document.querySelector("input");

input.addEventListener('paste', (event) => {
  event.preventDefault();
  alert("!")
});

paste 이벤트가 발생하였을 때, 기존의 이벤트를 없애고 알림창을 띄운다.

만약 당신이 위 input에 붙여넣기를 하였을 때, 텍스트는 붙여넣기 되지 않고 단지 알림창이 뜰 뿐이다.