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

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

既然有人问我解决方案，让我post我使用的解决方法：

我从来没有设法找到一种方法来像正常形式一样自动添加这种功能，我确实设法在图标上触发了一个点击事件，然后调用了一个 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 来显示整个内容作为单个文本框。

希望对您有所帮助！

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

Trigger ion-input focus when ion-icon clicked

ionic-framework

ionic4