>  기사  >  웹 프론트엔드  >  클립보드에 있는 내용을 빠르게 찾는 방법

클립보드에 있는 내용을 빠르게 찾는 방법

WBOY
WBOY원래의
2024-08-17 20:30:36944검색

How to Quickly Find Out What’s in Your Clipboard

클립보드에 액세스하는 JavaScript 기술:

1.클립보드 API 사용(navigator.clipboard.readText):

클립보드 API는 클립보드에서 읽고 쓸 수 있는 안전한 방법을 제공합니다. navigator.clipboard.readText()를 사용하여 클립보드에서 텍스트 데이터를 빠르게 검색하는 방법은 다음과 같습니다.

async function getClipboardContent() {
    try {
        const text = await navigator.clipboard.readText();
        console.log('Clipboard content:', text);
        alert('Clipboard content: ' + text);
    } catch (err) {
        console.error('Failed to read clipboard contents:', err);
    }
}

// Trigger the function
getClipboardContent();

2. 버튼을 사용하여 클립보드 콘텐츠 가져오기:
때로는 사용자가 버튼을 클릭할 때만 클립보드 읽기를 트리거하고 싶을 수도 있습니다. 방법은 다음과 같습니다.

<button onclick="getClipboardContent()">Show Clipboard Content</button>

<script>
async function getClipboardContent() {
    try {
        const text = await navigator.clipboard.readText();
        alert('Clipboard content: ' + text);
    } catch (err) {
        console.error('Failed to read clipboard contents:', err);
    }
}
</script>

3. 클립보드 액세스 권한 처리:
Clipboard API에는 사용자 권한이 필요하므로 가능한 권한 문제를 적절하게 처리하는 것이 중요합니다. 클립보드를 읽거나 쓰려고 시도하기 전에 권한이 있는지 확인하는 방법은 다음과 같습니다.

async function getClipboardContent() {
    try {
        // Request permission to read from the clipboard
        const readPermission = await navigator.permissions.query({ name: 'clipboard-read' });
        if (readPermission.state === 'granted' || readPermission.state === 'prompt') {
            const text = await navigator.clipboard.readText();
            alert('Clipboard content: ' + text);
        } else {
            alert('Clipboard read access denied');
        }
    } catch (err) {
        console.error('Failed to read clipboard contents:', err);
    }
}

async function writeToClipboard(text) {
    try {
        // Request permission to write to the clipboard
        const writePermission = await navigator.permissions.query({ name: 'clipboard-write' });
        if (writePermission.state === 'granted' || writePermission.state === 'prompt') {
            await navigator.clipboard.writeText(text);
            alert('Text copied to clipboard: ' + text);
        } else {
            alert('Clipboard write access denied');
        }
    } catch (err) {
        console.error('Failed to write to clipboard:', err);
    }
}

클립보드에 쓰기 예시

<button onclick="writeToClipboard('Hello, World!')">Copy "Hello, World!" to Clipboard</button>

전체 예제 코드
GitHub Gist에서 전체 예제 코드를 찾아 클립보드에 있는 내용을 빠르게 확인할 수 있습니다.

이 기사가 여러분의 개발 생활을 좀 더 쉽게 만들었다면 하트를 탭하고 ❤️ 계속해서 더 많은 JavaScript 마법을 즐겨보세요!

위 내용은 클립보드에 있는 내용을 빠르게 찾는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.