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

Question

大家好

我正在构建我的第一个 ionic 4 移动应用程序，并且有一个关于如何将标签、图标和其他元素连接到表单输入的问题。

在普通的 HTML 表单中，您可以使用“for”属性在标签和输入之间建立关系，如下所示：

<label for="name">Please enter name</label>
<input type="text" id="name" name="name"/> 

有了这种关系，当您单击标签或输入本身以获得对输入的焦点时，输入字段将获得焦点。

在 ionic 中，您使用 ion-label 和 ion-input 而不是默认的 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 来实现这一点？

任何建议都会被大大采纳

Answer 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（在我的 Type Sctipr 文件中）：

  @ViewChild('input') searchInput: { setFocus: () => void; } ;

  ...

   focusSearch() {
     this.searchInput.setFocus();
   }

请注意，如果您单击围绕图标和文本框的“ion-item”中的任何位置，我将调用“focusSearch()”函数，因为我使用 CSS 将整个内容显示为单个文本框。

希望这会有所帮助！