单击离子图标时触发离子输入焦点

问题描述 投票:1回答:1

美好的一天

我正在构建我的第一个离子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来实现这一目标?

任何建议都会被大量挪用

ionic-framework ionic4
1个回答
1
投票

因此,由于我被别人要求解决方案,让我发布我使用的解决方法:

我从未设法找到一种方法来自动添加这种功能,就像在普通形式中一样,我确实设法在图标上触发点击事件,然后调用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将整个事物显示为单个文本框。

希望这可以帮助!

© www.soinside.com 2019 - 2024. All rights reserved.