javascript - 活动元素没有得到关注

问题描述

我正在尝试使用 java 脚本将重点放在按钮的模糊事件上的链接上，但它不起作用。

按下选项卡焦点转到地址栏。

JavaScript

    blur(closebutton: HTMLButtonElement, link: HTMLButtonElement,p) {


    console.log(closebutton);
    console.log(link);
    console.log(document.activeElement)

    link.focus();
    console.log("active element before closing popover")
    console.log(document.activeElement)
    console.log(document.hasFocus())
  }

控制台输出：

<button class="close">…&lt;/button>
<button class="popoverLink" container="body" html="true" placement="top-right bottom-right" popoverclass="custom-popover" triggers="manual" ng-reflect-auto-close="true" ng-reflect-ngb-popover="[object Object]" ng-reflect-placement="top-right bottom-right" ng-reflect-triggers="manual" ng-reflect-container="body" ng-reflect-popover-class="custom-popover" aria-describedby="ngb-popover-1"> DIV &lt;/button>
<body class="mat-typography">…&lt;/body>
active element before closing popover
<button class="popoverLink" container="body" html="true" placement="top-right bottom-right" popoverclass="custom-popover" triggers="manual" ng-reflect-auto-close="true" ng-reflect-ngb-popover="[object Object]" ng-reflect-placement="top-right bottom-right" ng-reflect-triggers="manual" ng-reflect-container="body" ng-reflect-popover-class="custom-popover" aria-describedby="ngb-popover-1"> DIV &lt;/button>
true

HTML

<div>
          <ng-template #popContent>
            <span id="glossary">  {{element.description| glossary:glossaryDescription}}</span>
            <button class="close" (click)="p.close(); returnFocus(p)"  #closebutton  (focus)="true" (blur)="blur(closebutton,link,p)"><img src="assets/icons/close.svg"></button>

          </ng-template>
          <button class="popoverLink" [ngbPopover]="popContent"
                  triggers="manual" #p="ngbPopover"
                  (click)="start = true; p.open(); returnFocus(p)" [autoClose]="true" placement="top-right bottom-right"
                  container="body"
                  html="true" popoverClass="custom-popover"   (shown)="openPopover(p);"   (keypress)=" keypress(p)" #link >

            {{split(element.description)[0]}}
          </button>
          /{{split(element.description)[1]}}
        </div>

标签： javascriptangularbootstrap-4angular-ui-bootstrapng-bootstrap

javascript - 活动元素没有得到关注

问题描述

解决方案

推荐阅读