ionic4的ion-searchbar的setFocus()方法使用

使用场景：

app的某个页面需要一个搜索功能：1. 点击搜索图标打开一个新的搜索页2. 加载页面的同时给搜索框设置焦点、触发键盘。（提升用户的体验，类似于微信的搜索功能操作）

具体方法：

在对应的ts文件中引入IonSearchbar

// 导入 IonSearchbar
import { IonSearchbar} from '@ionic/angular';@Component({selector: 'app-file-search',templateUrl: './file-search.component.html',styleUrls: ['./file-search.component.scss'],
})
export class FileSearchComponent implements OnInit {// 申明 IonSearchbar 为 ionSearchbar；下边通过this.ionSearchbar调用setFocus()方法。@ViewChild(IonSearchbar, { static: true }) ionSearchbar: IonSearchbar;constructor() { }ngOnInit() { }// 该方法在加载页面时会触发ionViewDidEnter() {setTimeout(() => {// 给ion-Searchbar组件的输入框设置焦点this.ionSearchbar.setFocus();});}
}

在html文件中添加 ts文件中定义的 ionSearchbar

<ion-searchbar  #ionSearchbar     ...>

效果展示

附上Ionic4官方手册：

https://ionicframework.com/docs/api/searchbar

ionic4的ion-searchbar的setFocus()方法使用相关推荐

SetFocus 方法
SetFocus 方法将焦点移至指定的控件或窗体. 语法 object.SetFocus object 所在处代表对象表达式,其值是"应用于"列表中的一个对象. 说明对象必须是 ...
ios searchBar 的代理方法集合
下面是搜索框控件的一些代理方法: - (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar;将要开始编辑时的回调,返回为NO,则不能编辑 ...
计算机基础（七）：ION定义与使用方法
一.ION定义 (1)ION是Google的下一代内存管理器,用来支持不同的内存分配机制,如CARVOUT(PMEM),物理连续内存(kmalloc), 虚拟地址 ...
文献翻译-北京大学黄岩谊课题组在nature biotechnology的ECC测序方法文章
原文:http://dx.doi.org/10.1038/nbt.3982 Highly accurate fluorogenic DNA sequencing with information th ...
GetFocus\SetFocus\LostFocus区别
一.GetFocus事件 Getfocus当一个控件得到焦点时触发, ----过程获得焦点可以通过诸如TAB 切换,或单击对象之类的用户动作,或在代码中用 SetFocus 方法改变焦点来实现. 语 ...
vba 判断文本框内容是否为空_VBA代码用SetFocus精确控制焦点事件
VBA++ 题记: 静下心,多学习有用的知识,多提高自己的水平和能力,这才是正道.时间就像一张网,你撒在哪里,你的收获就在哪里.谨记自己的方向,这是路之所在.适当节制自我的各种欲望,谁都逃不过时间的历 ...
setfocus属性
使用 SetFocus 方法可以让特定字段或控件获得焦点以便所有用户输入都针对这个对象. 要读取控件的某些属性,该控件必须具有焦点.例如,在能读取文本框的 Text 属性之前,该文本框必须具有焦点. ...
浅析flex中的焦点focus
一.无焦点的困扰--组件监听不到键盘事件原因:只有获得焦点的组件(确切说是InteractiveObject)才能监听到键盘事件的目标阶段:键盘事件(flash.events.KeyboardEve ...
iOS - UISearchController
前言 NS_CLASS_DEPRECATED_IOS(3_0, 8_0, "UISearchDisplayController has been replaced with UISearch ...

ionic4的ion-searchbar的setFocus()方法使用

使用场景：

具体方法：

ionic4的ion-searchbar的setFocus()方法使用相关推荐

最新文章

热门文章