美好的一天
我正在构建我的第一个离子4移动应用程序,并且有关于如何将标签,图标和其他元素连接到表单输入的问题。
在普通的HTML表单中,您使用“for”属性在标签和输入之间建立关系,如下所示:
<label for="name">Please enter name</label>
<input type="text" id="name" name="name"/>
通过这种关系,当您单击标签或输入本身以获得对输入的关注时,输入字段将获得焦点。
在离子中,您使用离子标签和离子输入而不是默认的HTML表单元素,这些似乎不共享此功能。
我特别感兴趣的是使用图标作为上述标签。我尝试了以下但没有成功:
<ion-item>
<ion-label for="searchText">
<ion-icon name="search"></ion-icon> <!--name here refers to the icon displayed-->
</ion-label>
<ion-input id="searchText" name="searchText" type="text" placeholder="Search" ></ion-input>
</ion-item>
是否有类似的东西可以使用,或者我是否需要使用JavaScript来实现这一目标?
任何建议都会被大量挪用
因此,由于我被别人要求解决方案,让我发布我使用的解决方法:
我从未设法找到一种方法来自动添加这种功能,就像在普通形式中一样,我确实设法在图标上触发点击事件,然后调用JavaScript函数以将焦点放在我的输入字段上。它看起来像这样:
HTML:
<ion-item color="light" class="white-iput" lines="none" (click)="focusSearch()">
<button (click)="focusSearch()" class="icon-button">
<ion-icon name="search" color="primary" for="searchText"></ion-icon>
</button>
<ion-input #input id="searchText" type="text" placeholder="Search" ></ion-input>
</ion-item>
JS(在我的Typescript文件中):
@ViewChild('input') searchInput: { setFocus: () => void; } ;
...
focusSearch() {
this.searchInput.setFocus();
}
请注意,如果您单击图标和文本框周围的“ion-item”中的任何位置,我会调用“focusSearch()”函数,因为我使用CSS将整个事物显示为单个文本框。
希望这可以帮助!