> 웹 프론트엔드 > 프런트엔드 Q&A > JavaScript는 붙여넣기를 금지합니다.

JavaScript는 붙여넣기를 금지합니다.

WBOY
풀어 주다: 2023-05-22 10:09:37
원래의
1835명이 탐색했습니다.

JavaScript는 붙여넣기를 비활성화합니다.

대부분의 웹 애플리케이션에서 사용자는 붙여넣기 기능을 사용하여 클립보드의 텍스트, 이미지 및 기타 미디어 콘텐츠를 웹 페이지에 붙여 넣을 수 있습니다. 이 기능은 편리하지만 때로는 보안 위험과 사용자 경험 문제를 야기합니다. 이 문서에서는 JavaScript를 사용하여 붙여넣기를 비활성화하는 방법을 설명합니다.

1. 붙여넣기 이벤트

JavaScript에서는 onpaste 이벤트를 사용하여 붙여넣기 작업을 처리할 수 있습니다. 이 이벤트는 사용자가 텍스트 필드나 편집 가능한 영역에 콘텐츠를 붙여넣을 때 시작됩니다.

다음은 onpaste 이벤트를 사용하는 방법을 보여주는 간단한 예입니다.

<input type="text" onpaste="alert('禁止粘贴!'); return false;">
로그인 후 복사

사용자가 텍스트 상자에 붙여넣으려고 하면 프롬프트 상자가 나타나 붙여넣기 작업을 수행할 수 없다는 메시지가 나타납니다.

2. 붙여넣기 비활성화

사용자가 텍스트 필드나 편집 가능한 영역에 붙여넣는 것을 완전히 금지하려면 onpaste 이벤트의 반환 값을 false로 설정할 수 있습니다. 이런 방식으로 사용자가 붙여넣기 작업을 위해 어떤 방법을 사용하더라도 금지됩니다.

<textarea onpaste="return false;"></textarea>
로그인 후 복사

이 예에서는 사용자가 텍스트 필드에 붙여넣는 것을 비활성화합니다. 사용자가 단축키 Ctrl + V를 사용하거나 마우스 오른쪽 버튼을 클릭하고 붙여넣기를 선택하는지 여부에 관계없이 붙여넣기 작업이 차단됩니다.

3. 붙여넣은 내용 지우기

사용자가 붙여넣을 수 있기를 바라지만 붙여넣은 내용을 지워야 하는 경우가 있습니다. 이 요구 사항은 일반적으로 특정 유형의 콘텐츠를 필터링해야 하거나 붙여넣은 콘텐츠를 처리해야 하는 시나리오에서 발생합니다.

다음 예에서는 클립보드에서 텍스트 상자에 붙여넣은 모든 HTML 태그를 지우는 방법을 보여줍니다.

<input type="text" onpaste="event.preventDefault(); var text = (event.originalEvent || event).clipboardData.getData('text/plain'); text = text.replace(/<[^>]*>/g, ''); document.execCommand('insertText', false, text);">
로그인 후 복사

사용자가 텍스트 상자에 붙여넣으면 onpaste 이벤트가 실행되고 JavaScript 코드가 실행됩니다. 이 코드는 event.preventDefault()를 사용하여 기본 붙여넣기 작업을 방지합니다. 그런 다음 클립보드에서 일반 텍스트를 가져와 처리하고 모든 HTML 태그를 제거합니다. 마지막으로 document.execCommand()를 사용하여 처리된 텍스트를 텍스트 상자에 삽입합니다.

4. 결론

이 기사에서는 JavaScript를 사용하여 붙여넣기 기능을 비활성화하고 붙여넣은 내용을 지우는 방법을 소개했습니다. 이러한 기술은 웹 애플리케이션의 보안을 강화하고 사용자 경험을 향상시키는 데 도움이 될 수 있습니다. 그러나 실제 사용에서는 불필요한 문제와 어려움을 피하기 위해 이러한 기능이 애플리케이션에 미치는 영향을 신중하게 평가해야 합니다.

위 내용은 JavaScript는 붙여넣기를 금지합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿