如何将焦点设置在div上

时间:2016-08-01 08:44:01

标签: angular

我在页面中有几个div

<div >...
<div >....
<div  class="input-field col s12" style="display : inline-block;">
  <span style="width: auto;cursor: pointer;position: absolue">
  <input  type="text" [(ngModel)]="query"
           (keyup)="handleKeyPress($event)"
            style="padding: 4px;" (click)="displayDropdown();" >

  <div  #suggestion class="suggestions" *ngIf="filteredList.size > 0"  tabindex="-1">
  <ul class="ulsuggestions" >
     <li *ngFor="let item of filteredList| maptoiterable" style="cursor: default;">
        <bold> {{item.key}}</bold>
        <ul style="list-style-type: none;">
           <li *ngFor="let val of item.value" >
             <a (click)="select(val)"  style="cursor: pointer;" (keyup)="handleKeyPress($event)" tabindex=-1  #item>{{val}}</a>
            </li>
        </ul>
    </li>
  </ul>
</div>

在此div #suggestion中,有一个滚动条,也位于主页面中 在我的代码中,我想把焦点放在这个div上以允许当按下按键箭头时,按下div滚动条而不是主页的滚动条。

我曾尝试过

 @ViewChild("suggestion")
 suggestion: ElementRef;
  this._renderer.invokeElementMethod(this.suggestion.nativeElement, 'focus', []);

但是当div滚动条位于div的顶部时,它是主页的滚动条返回

1 个答案:

答案 0 :(得分:1)

试试这个,这应该有用。

applicationWillResignActive:/applicationDidBecomeActive: