Check if html th is on focus

Check if html th is on focus - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Check if html th is on focus (/showthread.php?tid=1523)

Check if html th is on focus - opti13403 - 27.09.2022

I want to find out wether my HTML Event is on focus (not if it is clicked but focused by navigating with the keyboard).

Code:
myElement === document.activeElement

is only true when the element is clicked but not when it's focused by keyboard navigation.

Code:
    tooltip(){

  var myElement = document.getElementById("myID");

  let myEvent = "";

  if (myElement=== document.activeElement){

     myEvent = "focus";

  }

return myEvent;

};

<th id="myID" *ngSwitchCase="'validation'" tooltipEvent={{tooltip()}} pTooltip="I am a tooltip"

          tooltipPosition="top" [escape]="false"   [pSortableColumn]="column.field" [ngStyle]="column.style">

            <div class="col-title">

            <span data-testid="column-validationl-header" class="ui-column-title" >Validation </span>

              <p-sortIcon [field]="column.field" *ngIf="column.sortable"></p-sortIcon>

            </div>

          </th>

any Ideas?

RE: Check if html th is on focus - rzscout - 28.09.2022

Hi opti13403,
this Forum is a German Forum. Please write in German in the future in this forum. I have a suitable solution for your problem. I hope it helps you.

Code:
'use strict';

document.addEventListener('DOMContentLoaded', init);

var elem, isfocus;

function init() {

    isfocus = false;

    elem = elem = document.getElementById("myID");

    elem.addEventListener('focus', function() {

        isfocus = true;

    });

    elem.addEventListener('blur', function() {

        isfocus = false;

    });

}

In this case i use two different event-handler. One to trigger on an focus-event and one for the blur-event. Your code is buggy and it is not written in the HTML or in the HTML5-Standard. TH as element stands for tablehead and is an part of a table.

Code:
p-sortIcon

This is not an element in HTML or HTML5. The p-element stands for paragraph.

Zitat:<p class="sortIcon" data-field="column.field" data-ngIf="column.sortable"></p>

bw rzscout