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

【问题标题】：Ionic trigger modal open function with ion-searchbar focus - click not working具有离子搜索栏焦点的离子触发模式打开功能-单击不起作用
【发布时间】：2017-11-04 09:33:03
【问题描述】：

我有一个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>

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

【问题讨论】：

你试过<ion-searchbar (tap)=而不是(click)吗？
@maudulus 您能否就所提供的答案提供一些反馈，以便我们可以调整并更好地帮助您？

标签： javascript angular typescript ionic-framework

【解决方案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>

【讨论】：

【解决方案2】：

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

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

说明

ion-searchbar ionic 元素创建多个子元素，其中一个当然是 input 元素，它有一个 searchbarElement 类。

我们首先要求获取所有具有此类名称的元素。这将返回一个此类元素的数组，在其第一个位置，索引 = 0 处，驻留着我们想要更改其功能的 <input> 字段。

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

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

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

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

【讨论】：

【解决方案3】：

您可以禁用 . 事实上，这个 ionic 标签正在使用输入 dom。所以如果你将 disable 属性设置为 'true' 将被禁用。

HTML

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

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

【讨论】：