主动元素没有集中

时间:2019-09-19 09:13:23

标签: javascript angular bootstrap-4 angular-ui-bootstrap ng-bootstrap

我正在尝试使用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">​…​</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 ​</button>​
<body class=​"mat-typography">​…​</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 ​</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>

enter image description here

0 个答案:

没有答案