JSFiddle - React, Tailwind, and code Playground

by Venkatesh Dematti

HTML

<script src="https://app.geckoform.com/gecko-embed/form.js?uuid=21FO00ggscuo3j00d3s46tb6px" id="gecko-form-embed-script"></script>

JavaScript

const iframe = document.getElementById('gecko-form-iframe-embed-21FO00ggscuo3j00d3s46tb6px');

iframe.contentWindow.addEventListener('keydown', function(event) {
  const keysToTrap = ['Tab']; // Specify keys you want to trap here, e.g., 'Tab'

  if (keysToTrap.includes(event.key)) {
    event.preventDefault();

    // Manage focus within iframe
    // Example: You can focus on the first focusable element within the iframe
    const firstFocusable = iframe.contentDocument.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
    if (firstFocusable) {
      firstFocusable.focus();
    }
  }
});