如何在reCaptcha V2超时后禁用提交按钮？

Hey there, let's fix this reCaptcha timeout issue so your submit button gets disabled when the verification expires. You're already handling the success/failure cases, so we just need to hook into the expiry event—here are two solid approaches, starting with the official (most reliable) method:

1. Use reCaptcha's Official expired-callback (Recommended) #

Google's reCaptcha provides a built-in callback specifically for when a verification expires. This is the cleanest and most supported way to handle the timeout scenario.

For Explicitly Rendered reCaptcha #

If you're rendering reCaptcha via JavaScript, pass the expired-callback parameter when calling grecaptcha.render():

function initRecaptcha() {
  grecaptcha.render('your-recaptcha-container-id', {
    sitekey: 'YOUR_SITE_KEY',
    // Your existing success callback to enable the button
    callback: (response) => {
      document.getElementById('submit-btn').disabled = false;
    },
    // New expiry callback to disable the button
    'expired-callback': () => {
      document.getElementById('submit-btn').disabled = true;
    }
  });
}

For Automatically Rendered reCaptcha #

If you're using the auto-render method with data-sitekey attributes, define a global function for the expiry callback and reference it via data-expired-callback:

<div class="g-recaptcha" 
     data-sitekey="YOUR_SITE_KEY"
     data-callback="onCaptchaSuccess"
     data-expired-callback="onCaptchaExpired"></div>

<script>
// Your existing success handler
function onCaptchaSuccess(response) {
  document.getElementById('submit-btn').disabled = false;
}

// Expiry handler to disable the button
function onCaptchaExpired() {
  document.getElementById('submit-btn').disabled = true;
}
</script>

2. Fallback: Listen for DOM Changes with MutationObserver #

If for some reason the official callback doesn't work (e.g., older reCaptcha versions), you can watch the DOM for the expiry message and trigger the button disable logic when it appears.

This uses MutationObserver to detect when the "Verification expired" text is added to the reCaptcha container:

// Target the reCaptcha container
const recaptchaContainer = document.querySelector('.g-recaptcha');

// Set up the observer to watch for new nodes
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // Check each added node for the expiry message
    mutation.addedNodes.forEach(node => {
      if (node.textContent?.includes('Verification expired. Check the checkbox again.')) {
        // Disable the submit button
        document.getElementById('submit-btn').disabled = true;
      }
    });
  });
});

// Start observing the container (including nested elements)
observer.observe(recaptchaContainer, { childList: true, subtree: true });

Pro Tip #

To keep your code clean, abstract the button enable/disable logic into reusable functions, like:

function enableSubmitButton() {
  document.getElementById('submit-btn').disabled = false;
}

function disableSubmitButton() {
  document.getElementById('submit-btn').disabled = true;
}

Then call these functions in your success callback, expiry callback, and any other relevant places.

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