Question

如何在查看init（ngAfterViewInit）之后将焦点设置为我的kendoui multiselect元素？。

在普通输入元素处，我将焦点设置为：

HTML：

<input #setFocus type="text" class="form-control" formControlName="code" id="code" />

组件：

@ViewChild('setFocus') focusElement: any;
...
ngAfterViewInit() {
    if (this.focusElement) {
        this.focusElement.nativeElement.focus();
    }
}

感谢您的帮助！

Answer 1

查看他们的documentation，您可以使用open输入

@Component({
    selector: 'tester',
    template: `
        <kendo-multiselect #setFocus [data]="items"></kendo-multiselect>
    `
})
class TesterComponent {

   @ViewChild('setFocus') 
   focusElement: MultiSelectComponent;

   ngAfterViewInit() {
      this.focusElement.open = true;
   }   
}

例如，您可以使用[open]作为模板输入进行切换。

Answer 2

你总是可以看看html如何呈现控件，你可以使用。

let el = this.focusElement.nativeElement;

if (el.className.indexOf("k-multiselect") != -1) { // kendo multiselect
  el.children[0].children[1].children[0].focus();
}

或使用jquery

let el = this.focusElement.nativeElement;
$(el).find(".k-input").focus();

直到剑道正确实现这一点。

Answer 3

我将其用于自动完成功能，也许可以帮忙：

模板：

<kendo-autocomplete #customerIdCtl ...

组件：

@ViewChild('customerIdCtl') customerIdCtl


ngAfterViewInit() {
    setTimeout(() => {
      const el: any = document.querySelectorAll(`#${this.customerIdCtl.focusableId}`)[0]
      el.focus()
    })
  }

将重点放在kendoui multiselect上

3 个答案: