ionic ion-searchbar focus 获取焦点

Ionic中SearchBar自动聚焦

最新推荐文章于 2023-11-11 20:38:23 发布

原创最新推荐文章于 2023-11-11 20:38:23 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic #searchbar #focus #focuser

ionic 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在Ionic框架中使SearchBar组件自动获得焦点的方法。通过使用Angular的@Directive装饰器，自定义指令Focuser实现了在页面加载后自动聚焦到SearchBar的输入框上，提升了用户体验。

ionic ion-searchbar 组件获取焦点方法：

import {Directive, Renderer, ElementRef} from "angular2/core";

@Directive({
  selector : '[focuser]'
})

export default class Focuser {
  constructor(public renderer: Renderer, public elementRef: ElementRef) {}

  ngOnInit() {
    //search bar is wrapped with a div so we get the child input
    const searchInput = this.elementRef.nativeElement.querySelector('input');
    setTimeout(() => {
      //delay required or ionic styling gets finicky
      this.renderer.invokeElementMethod(searchInput, 'focus', []);
    }, 0);
  }
}


<ion-searchbar [focuser] placeholder="Enter Your Address"></ion-searchbar>