クリップボードの内容をすばやく確認する方法

WBOY
リリース: 2024-08-17 20:30:36
オリジナル
983 人が閲覧しました

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.クリップボードアクセスの権限の処理:
クリップボード 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 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!