Javascript 您能否覆盖ion搜索栏'；单击“取消”按钮不关闭键盘？

我正试图设计一个信使使用离子。目前，我正在尝试制作悬停在键盘上方的文本输入框

我真的很喜欢ion搜索栏的动画和感觉，所以我用它作为我的文本输入（我知道有点作弊）。我想用ion searchbars内置的cancel按钮作为发送按钮，但当我按下它时，它会自动关闭键盘，所以我制作了自己的按钮，并将它们包装在一个文件夹中

我希望键盘关闭onBlur（），以便用户可以阅读他们的消息。现在唯一的问题是，我不能在包含搜索栏和按钮的整个过程中使用IonBlur（）函数，因为按下send按钮也会导致搜索栏失去焦点

解决方案1：覆盖键盘关闭并将取消按钮用作发送按钮

解决方案2：向DIV添加onBlur函数（我知道这不是一个好的解决方案）

解决方案3：使用ION-INPUT制作相同的搜索栏

我应该怎么做？怎么做

模板：

<div id="input-grid">
    <ion-searchbar
      animated
      showCancelButton="never"
      searchIcon="none"
      placeholder=""
      type="text"
      id="textInput"
    >
      <ion-button icon-only fill="clear" id="send-button">
        <ion-icon name="send"></ion-icon> </ion-button
    ></ion-searchbar>
  </div>

CSS:

#textInput {
  order: 1;
  flex: 9;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 10px;
  margin-right: 0px;
}

#send-button {
  order: 2;
  flex: 2;
  margin-left: -10px;
}

#input-grid {
  padding: none;
  margin: none;
  display: flex;
}[enter image description here][1]

CSS:
#文本输入{
顺序：1；
弹性：9；
填充：0px；
边际上限：0px；
边缘底部：0px；
左边距：10px；
右边距：0px；
}
#发送按钮{
顺序：2；
弹性：2；
左边距：-10px；
}
#输入网格{
填充：无；
保证金：无；
显示器：flex；
}[在此处输入图像描述][1]

您可以将事件列表器添加到发送btn，首先按搜索名称获取元素close，然后获取on-click，elm.addEventListner（'click'，ev=>{ev.preventDefault；//此处的发送消息函数，您希望覆盖它}）；