Question

我有一个ion-searchbar，点击后会打开一个模态。但是，目前click进程实际上是两次点击，一次是焦点，一次是打开模式。我尝试将点击添加到其中包含的ion-toolbar，并尝试使用ion-searchbar停用[disabled]="true"，但ion-searchbar无法使用已禁用的功能{1}}。如何在不必双击的情况下触发新模态打开，并且在原始搜索栏上不会发生焦点？

HTML

<ion-header>
  <ion-toolbar >
    <ion-searchbar (click)="openSearchModal()"></ion-searchbar>
  </ion-toolbar>
</ion-header>

JS

  openSearchModal() {
    let myModal = this.modalCtrl.create(SearchmodalPage); 
    myModal.present(); 
  }

Answer 1

就像你说的那样，ion-searchbar没有禁用的功能。

但是你可以创建自己的搜索栏，它将使用离子类来避免重新编码，你可以禁用它。

请在此处查看我的代码：

<ion-header>
   <ion-toolbar>
    <div class="searchbar searchbar-ios searchbar-left-aligned searchbar-active" (click)="openSearchModal()">
      <div class="searchbar-input-container">
        <div class="searchbar-search-icon"></div>
        <input class="searchbar-input" placeholder="Search" type="search" autocomplete="off" autocorrect="off" spellcheck="false" disabled="true">
      </div>
    </div>
  </ion-toolbar>
</ion-header>

Answer 2

在.ts文件的类中添加此函数（最佳实践在构造函数之前）：

ion-searchbar

说明

input离子元素会创建多个子元素，其中一个元素当然是searchbarElement个元素，其中有一个类<input>。

我们首先要求使用此类名称获取所有这些元素。这将返回一个这样的元素数组，在其第一个位置，索引= 0，驻留在我们想要更改其功能的<input class="searchbar-input" onFocus="openSearchModal()">字段。

然后，我们以编程方式设置在元素获得焦点时调用的onFocus attribute（例如，单击时）。这实质上使它看起来如下：

ionViewDidLoad()

所以最后，当用户点击搜索框时，会调用模态。

然后我们将所有这些包装在Document a lifecycle hook ionic provides内，我们可以在视图加载后立即运行代码。

Answer 3

您可以禁用子组件。事实上，这个离子标签正在使用输入dom。因此，如果您将禁用属性设置为＆＃39; true＆＃39;将被禁用。

<强> HTML

<ion-searchbar id="searchBar"></ion-searchbar>

<强> TS

let ionSearchBarInputBox = document.getElementById("searchBar").getElementsByTagName("INPUT");
ionSearchBarInputBox[0].disabled=true;

具有离子搜索栏焦点的离子触发模态打开功能 - 单击不起作用

3 个答案:

说明