Admin

Software Developer

11th December, 2022

310

Trap focus with in a block in Angular by Exclude disabled,hidden and display none elements

In this tutorial we learn how to trapFocus inside particular area.
1)Create a directive file trap-focus.directive.ts

import { Directive, ElementRef, AfterViewInit } from '@angular/core';

@Directive({
  selector: '[trapFocus]',
})
export class TrapFocusDirective implements AfterViewInit {
  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    this.trapFocus(this.el.nativeElement);
  }

  trapFocus(element) {
    //here you can add more tags which your form or Dom have
    const focusableEls1 = element.querySelectorAll(
      'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"]'
    );

    let focusableEls = [].filter.call(focusableEls1, function (el: any) {
      var style = window.getComputedStyle(el);
      var checkOffSet = !!(
          el.offsetWidth ||
          el.offsetHeight ||
          el.getClientRects().length
        );
      return style.display !== 'none' && !el.disabled && checkOffSet;
    });

    console.log('focusableEls', focusableEls);
    const firstFocusableEl: any = focusableEls[0];
    const lastFocusableEl: any = focusableEls[focusableEls.length - 1];

    element.addEventListener('keydown', function (e) {
      var isTabPressed = e.keyCode === 9; // isTabPressed
      if (!isTabPressed) return;

      if (e.shiftKey) {
        /* shift + tab */ if (document.activeElement === firstFocusableEl) {
          lastFocusableEl.focus();
          e.preventDefault();
        }
      } /* tab */ else {
        if (document.activeElement === lastFocusableEl) {
          firstFocusableEl.focus();
          e.preventDefault();
        }
      }
    });
  }
}

2)Import Your directive in app.module.ts inside declaration and import

@NgModule({
   declarations: [
    TrapFocusDirective
  ],
  import: [
    TrapFocusDirective
  ]

3)Now you can use like that and focus being trap

<h3> Angular trapFocus</h3>
<p>
  It traps focus within a block.
</p>
<p>
  Use tab of shift/tab to navigate the below items
</p>

<button>focusable item</button>
<button>focusable item</button>
<br/>

<fieldset trapFocus class="focusable">
  <legend> trapFocus</legend>
  <p>
    <input type="radio" /> radio<br/>
    <span> span </span>
    <button disabled> button disabled </button>
  </p>
  <p>
    <a href="#">&lt;a> link</a> 
    <span> span </span>
    <button> button </button>
  </p>
  <p style="display:none;">
    <input type="checkbox" /> checkbox
    <select><option>select</option></select>
    <br/>
    <button>focusable item</button>
  </p>
</fieldset>

<button>focusable item</button>
<button>focusable item</button>

Admin

Related Tutorial

Trap focus in Angular using the CDK.

Popular Tools for Developers

Popular Tools for Project Manager

Popular Tools for Youtubers

Other Tools for Daily Life

About us

Find Online Tools

Quick links

Social links

Other