具有離子搜索欄焦點的離子觸發模式打開功能-單擊不起作用

Question

我有一個ion-searchbar ，當單擊它時會打開一個模態。 但是，當前click過程實際上需要進行兩次單擊，一次進行焦點單擊，一次單擊以打開模式。 我試圖將單擊添加到包含它的ion-toolbar ，並嘗試使用[disabled]="true"禁用ion-searchbar ，但是禁用功能對ion-searchbar不可用。 如何觸發新的模式打開而無需雙擊，並且不會使焦點集中在原始搜索欄上？

的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文件的類中添加此函數（最佳做法是在構造函數之前）：

ionViewDidLoad(){
    document.getElementsByClassName('searchbar-input')[0].setAttribute("onFocus", "openSearchModal()");
}

說明

ion-searchbar ionic元素創建多個子元素，其中之一當然是具有class searchbarElement類的input元素。

我們首先要求使用此類名稱獲取所有這些元素。 這將返回此類元素的數組，其第一個位置的索引為0，位於我們要更改其功能的<input>字段中。

然后，我們以編程方式設置onFocus屬性 ，當元素獲得焦點時（例如，單擊時），該屬性將被調用。 從本質上講，這看起來像以下內容：

<input class="searchbar-input" onFocus="openSearchModal()">

因此，最后，當用戶單擊搜索框時，將調用模式。

然后，我們將所有這些都包裝在ionViewDidLoad() ， ionViewDidLoad()是生命周期掛鈎ionic，提供了我們可以用來在視圖加載后立即運行代碼。

Answer 3

您可以禁用的子組件。 實際上，該離子標簽可與輸入dom配合使用。 因此，如果將disable屬性設置為'true'，則將被禁用。

的HTML

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

ts

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