ionic ion-searchbar focus 获取焦点

jasdolphin

于 2019-08-27 18:23:44 发布

阅读量1.3k

点赞数

分类专栏： ionic 文章标签： ionic searchbar focus focuser

本文链接：https://blog.youkuaiyun.com/jasdolphin/article/details/100106004

版权

ionic 专栏收录该内容

2 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>