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

因此，既然有人要求我提供解决方案，请允许我发布使用的解决方法：

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

希望这会有所帮助！

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

1 个答案: