离子化以编程​​方式设置了Focus [英] Ionic set Focus programmatically

问题描述

我正在组件中使用带角度的离子型，并且试图在页面加载后以编程方式设置焦点.这是代码

I am using ionic with angular in a component and I am trying to set focus programmatically after the page loads up. This is the code

item.component.html:

item.component.html:

<ion-row>
         <ion-col col-5>
            <ion-item >
              <ion-label>Departure Port</ion-label>
              <ion-select #selected class="selector" formControlName="control"
                          [(ngModel)]="modelItem"
                          (click)="selectItem()">
                  <ion-option
                    *ngFor="let item of [{code:item.code, desc:item.desc}]"
                    value="{{item.code}}">
                    {{item.desc}} ({{item.code}})
                  </ion-option>
                </span>
              </ion-select>
            </ion-item>                
          </ion-col>
</ion-row>

item.component.ts

item.component.ts

export class Item Component implements OnInit, AfterViewInit, AfterViewChecked {

 @ViewChild('selector')
  private selectorElRef: Select;

 public ngAfterViewInit(): void {
     this.portSelectorElRef.setFocus();
  }

我也尝试过:

 @ViewChild('selector')
  private selectorElRef: Select;

 public ngAfterViewInit(): void {
     this.portSelectorElRef.getElementRef().nativeElement.focus();
  }

这:

 @ViewChild('selector')
  private selectorElRef: Select;

 public ngAfterViewInit(): void {
     this.portSelectorElRef.getNativeElement.focus();
  }

variables.scss

variables.scss

*:focus {
  border: solid $primary-color 2px;
  box-shadow: 5px 10px 8px $primary-color;
}

以上都不是将焦点放在给定的项目上.我试图在AfterViewInit和AfterViewChecked中设置焦点-相同的效果(无).

None of the above is setting the focus on the given item. I have tried to set the focus in AfterViewInit and in AfterViewChecked - the same effect (none).

轻按以设置焦点工作正常，并且正在应用样式，但是我似乎无法以编程方式获得焦点.

Tabbing to set the focus works fine and the styling is being applied, but I can't seem to be able to get the focus programmatically.

推荐答案

所以也许不是您想要听到的，但我会尽力帮助您解决以下问题:

So maybe not exactly what you would want to hear but I will try to help with the following:

1. 浏览器对这种行为的支持是零散的:Safari和Chrome对它的工作方式具有不同的策略"，并且说起来很简单-现代Safari仅希望最终用户进行显式交互才能将重点放在元素上，而Chrome浏览器应允许您执行自己想做的事情.

.focus方法本身仅适用于特定的标准网络元素:输入，按钮等

The .focus method itself is only applicable to specific standard web elements: input, button etc

HTMLElement.focus()方法将焦点设置在指定的元素上(如果可以聚焦的话).

The HTMLElement.focus() method sets focus on the specified element, if it can be focused.

来源: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

在您的情况下，您尝试将其应用于离子组件ion-select，但不幸的是，该组件没有可聚焦的元素.

in your case you are trying to apply it to Ionic component ion-select which unfortunately does not have focusable elements.

请参见 stackblitz 并查看控制台，您将看到ion-select确实可以并没有真正的本机按钮元素(这是使用"span"和div等的另一个组件).

See this stackblitz and look at the console and you will see that ion-select does not really have a native button element (it is another component that uses "span" & div etc).

因此，从本质上讲，您正在尝试将焦点应用于那些不会以编程方式引起关注的元素.

So essentially you are trying to apply focus to elements that do not take on focus programmatically.

如果您可以解释您要实现的UX，也许可以通过其他方式实现?

If you can explain what UX you are trying to achieve - maybe that can be achieved in a different manner?

例如，您可以调用ion-select支持的.open()方法来在加载时打开选择器:

For example you could call .open() method that ion-select supports to open up the selector on load:

https://stackblitz.com/edit/ionic-r8issn

您基本上可以从此处使用普通的API: https://ionicframework.com/docs/api/components/select/Select/#open

You would basically leverage normal API from here: https://ionicframework.com/docs/api/components/select/Select/#open

这篇关于离子化以编程​​方式设置了Focus的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！