Hey there! Let's break down why your current code isn't showing any output in the console, and how to fix it step by step.

Key Issues in Your Original Code #

• You're logging the readText() Promise directly instead of resolving it to get the actual clipboard content
• You aren't handling cases where the permission state isn't granted (like prompt or denied)
• No error handling for potential clipboard access failures

Modified Working Code #

Here's an improved version using async/await (cleaner and easier to read) that handles permissions, resolves the clipboard text, and includes error catching:

$('#btn-paste-clipboard').on('click', async function(e) {
  try {
    // Check clipboard-read permission
    const permissionResult = await navigator.permissions.query({ name: 'clipboard-read' });
    console.log('Permission State:', permissionResult.state);

    // Handle different permission states
    switch(permissionResult.state) {
      case 'granted':
        // Resolve the Promise to get actual clipboard text
        const clipboardContent = await navigator.clipboard.readText();
        console.log('Clipboard Content:', clipboardContent);
        // Paste into your target element here, e.g.:
        // $('#your-input-element').val(clipboardContent);
        break;
      case 'prompt':
        console.log('Please grant clipboard access when the browser prompts you');
        break;
      case 'denied':
        console.log('Clipboard access has been denied. You can enable it in your browser settings.');
        break;
    }
  } catch(error) {
    console.error('Error accessing clipboard:', error);
  }
});

If you prefer using .then() chaining instead of async/await, here's that version:

$('#btn-paste-clipboard').on('click', function(e) {
  navigator.permissions.query({ name: 'clipboard-read' })
    .then(function(permissionResult) {
      console.log('Permission State:', permissionResult.state);
      if (permissionResult.state === 'granted') {
        return navigator.clipboard.readText();
      } else if (permissionResult.state === 'prompt') {
        console.log('Please allow clipboard access when prompted');
        return Promise.resolve(null);
      } else {
        console.log('Clipboard access denied');
        return Promise.resolve(null);
      }
    })
    .then(function(clipboardContent) {
      if (clipboardContent) {
        console.log('Clipboard Content:', clipboardContent);
        // Insert into your page element here
      }
    })
    .catch(function(error) {
      console.error('Error reading clipboard:', error);
    });
});

Important Notes to Keep in Mind #

• Secure Context Requirement: The Clipboard API only works over HTTPS (or localhost for local development). If you're testing on a plain HTTP site, it won't function.
• User Gesture: Your code is already using a button click (a valid user gesture), which is mandatory for clipboard access—great job on that!
• Browser Support: Most modern browsers support the clipboard-read permission, but double-check if your target audience uses older browsers that might need fallbacks.

内容的提问来源于stack exchange，提问作者John Crest